常用html标签及其属性

一、网页的基本结构

<!DOCTYPE> 标签：声明必须是 HTML 文档的第一行。用来指示浏览器关于页面使用哪个 HTML 版本进行编译的指令。

<html> 标签：此元素可告知浏览器其自身是一个 HTML 文档。

<head> 标签：用于定义文档的头部，它是所有头部元素的容器。

<body> 标签：body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

二、HTML基本标签

1.标题标签（ tittle）

标签写法：<h1>-<h6>

标签作用：是标明文章、作品等内容的简短语句。

2.段落标签

标签写法：<p>

标签作用：在网页中描述具有一个相对完整的内容。

3.斜体标签

标签写法：<em>

标签作用：实现的一种倾斜的字体样式

不会换行

4.粗体标签

标签写法：<strong>

标签作用：实现的一种加粗的字体样式

不会换行

5.水平线标签

标签写法：<hr/>

标签作用：在网页中加入平行线用来区分上下文

6.换行标签

标签写法：<br/>

标签作用：跳到下一个新行

7.注释

标签写法:

8.大于号

HTML源代码：>

9.小于号

HTML源代码：<

10.空格

HTML源代码： 

11.引号

HTML源代码：&quot；

12.注册商标

HTML源代码：®

13.

img 标签

(1) src 图片路径属性

相对路径：

/ 根路径

./ 同级路径

../ 上一级路径

绝对路径(不用)

(2) 宽度width px(像素)

高度height px(像素)

(3) alt 在图片不能正常加载时显示的提示语

(4) title 鼠标划上去显示的内容

14. 超链接

语法：<a href="链接地址" ></a>

1.

自身窗口：_self：自身窗口

<a href="../4.jpg" target="_self">跳转到首页</a>

新建窗口：_blank：新建窗口

<a href="../4.jpg" target="_blank"> 这是一个超链接，a链接。跳转到其他页面</a>

2.

<a href="https://www.baidu.com" target="_blank">百度一下你就知道 </a>

3.

<a href="https://www.hao123.com " target="_blank">

<img src="../4.jpg" width="150px" height="200px">

4.

<a href="tel:16688483388">16688483388</a>

5.<!-- 下载文件

浏览器直接打开跳转【html/txt】

浏览器下载文件【ppt/doc/excel/pdf/exe】 -->

<a href="./文件.doc">下载文件

6.锚连接

创建跳转链接： <a href =“#maker”>链接</a>

创建跳转标记： <a name =“maker” >跳转位置</a>、

举例：

三、HTML列表

1.无序列表

<ul>用来声明无序列表 <li>用来表示列表项。

type属性值: none 没有列表符号

circle 空心圆

disc 实心圆

square 实心正方形

2.有序列表

<ol>用来声明有序列表。 <li>用来表示列表项。

type属性值：1 数字1、2、3……

type属性值：a/A 小/大写英文字母

type属性值：i/I 小/大写罗马数字

3.自定义列表

<dl>用来声明自定义列表

<dt>用来表示列表标题

<dd>用来表示列表内容

4.HTML表格的基本语法

rowspan跨行：rowspan 属性规定单元格可横跨的行数。

colspan跨列：colspan 属性规定单元格可横跨的列数。

<td> 标签：每行被分割为若干单元格使用td定义

<tr> 标签：表格均有若干行组成使用tr定义

<table> 标签：定义表格

5.HTML表格美化

border：设置边框

bgcolor：设置背景颜色

align：设置表格在网页中的对齐方式

cellspacing：设置单元格与单元格之间的距离

cellpadding：设置文字与单元格之间的距离

width/height：表格的宽度/表格高度

四.HTML表单

1.发送表单数据的方式：

标签属性：method

常用值：get | post

2.向何处发送表单数据：

标签属性：action

<form method="post" action="xxx.html"></form>

3.表单元素属性

文本输入：

属性值：text,password

作用：text,表单中键入字母、数字等内容。

password，输入密码字段。

文件选择：

属性值：file

作用：file,定义了文件选择。

按钮：

属性值：button

作用：button,定义了普通按钮。

选择：

属性值：checkboxes,radio

作用：checkboxes,表单复选框。

radio,表单单选框。

提交按钮：

属性值：submit，image

作用：submit,定义了提交按钮。

image,定义了图片提交按钮。

重置按钮：

属性值：reset

作用：reset,定义了重置按钮。

size属性：元素的宽度，当 type 为 text 或 password时。

maxlength：type为text 或 password 时，输入的最大字符数

checked：type为radio或checkbox时，指定按钮是否是被选中

4.HTML下拉列表

select 标签用于声明下来列表

option 标签用于声明列表项

5.HTML多行文本域

可见行数：

标签属性：rows

rows 属性规定 textarea 的可见高度。

可见宽度：

标签属性：cols

cols 属性规定 textarea 的可见宽度。

最大长度：

标签属性：maxlength

maxlength 属性规定文本区域的最大长度（以字符计）。

名称：
标签属性：name

name 属性为文本区规定名称。

<textarea rows="3" cols="20" maxlength="50" name="demo"></textarea>

6.表单的高级应用

隐藏域 type="hidden”

只读：readonly=“readonly”

禁用：disabled="disabled"

HTML语义化表单：

域：使用<fieldset>来定义。将一组表单元素放到域中

域标题：使用<legend>。所谓的域标题就是给创建的域设置个标题。

常用html标签及其属性相关推荐

HTML 常用的标签和属性
我们在开发的过程中常用的标签其实很好理解,我们把京东的首页拿来一用从图中我们可以看到:文字.图片.logo.二维码... 其中文字可以组成词语,段落,或者文章:图片其实就包含了logo.二维码了其 ...
Hibernate视频学习笔记（3）常用映射标签及属性
JTA实现两阶段提交,全局事务,对多个数据库起作用 JDBC是本地事务,只对单一数据库起作用 Hibernate基本映射实体类 –〉表实体类中的普通属性 –〉表字段采用<class> ...
HTML的标签、属性大整理
文章目录一.结构编码类 1.外层 2.头部信息二.内容元素类 1.块级与内联元素特点 2.块级元素 3.内联元素 4.表单元素 5.HTML全局属性本篇全是经过整理的HTML中常用的标签和属性大 ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
HTML常用标签及属性
web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:css.行为:J ...
a标签download属性无效_html常用标签大全
html中标签有很多,每一种标签都有着不同的用处,下面这篇文章给大家总结html常用的标签,每一种标签都会跟随一个例子,话不多说,让我们来看看具体内容. 我的学习交流群web前端学习交流群 <f ...
HTML中table表格的常用标签及属性
table表格的常用标签及属性 <table border="1" cellspacing="0" cellpadding="5"&g ...
文本字段的html标签是什么,HTML常用标签及属性
什么是HTML HTML基本语法常用标签及属性链接文本标记表格列表表单结构标记什么是HTML Hyper Text Markup Language,超级文本标记语言 - 普通文本a:无 ...
dw常用标签_Dreamweaver里标签及属性详解
<> Dreamweaver 里标签及属性的详细解释 Dreamweaver 标签库可以帮助我们轻松的找到所需的标签 , 并根据列出的属性参数使用它 , 常用的 HTML 标签和属性解释 ...
html中加号用什么表示,HTML基础-常用标签及属性
Wild Web,万维网)的核心语言,由SGML发展而来.HTML(Hyper Text Markup Language/超文本标记语言)是一种布局语言,告诉浏览器显示什么内容以及如何显示内容.浏览器 ...

常用html标签及其属性

常用html标签及其属性相关推荐

最新文章

热门文章