HTML语法⼤全

⼀、认识html

  • html：hypertextmarkuplanguage，超⽂本标记语⾔，超链接（实现页⾯跳转）；
  • html结构标准： 
    <!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)-->
 
<head><!--文档的头部-->
  <meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
                                    <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>  <!--文档的标题-->
</head>
    <body><!--文档的主体-->
          
    </body>
</html>
 
​

    HTML 标签

1.html常用标签

1.1标题标签：

<h1></h1>——<h6></h6>

1.2段落标签:

<p></p>

1.3换行标签(单标签):

<br/>，在html5中可以省略/

1.4文本格式化标签：

语义标签说明
加粗<strong></strong>或者<b></b>更推荐使用<strong></strong>标签
倾斜<em></em>或者<i></i>更推荐使用<em></em>标签
删除线<del></del>或者<s></s>更推荐使用<del></del>标签
下划线<ins></ins>或者<u></u>更推荐使用<ins></ins>标签

1.5盒子标签:

<div></div>和<span></span>

1.6图像标签:

<img/>

1.7图像路径:

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级 如<img src="img.jpg"/>
下一级路径/图像文件位于HTML文件下一级 如<img src="imges/img.jpg"/>
上一级路径../图像文件位于HTML文件上一级 如<img src="../img.jpg"/>

1.8超链接标签:

<a href="跳转目标" target="目标窗口的弹出方式"></a>

1.9注释标签和特殊字符:

注释标签：

<!--注释-->

特殊字符：（只需记住空格符、大于号、小于号）

2.表格标签

2.1表格的基本语法：

<table>
      <tr> 
          <td>单元格内的文字</td>
      </tr>
</table>

2.2表头单元格标签:

<th></th>

2.3表格属性 （只做了解 后面只通过CSS来设置表格，语法要记住）

属性名属性值描述
alignleft、center、right表格元素对齐方式
border1或""规定是否有边框，默认为""，表示没有边框
cellpadding像素值规定单元格边沿与其内容之间空白，默认1px
cellspacing像素值规定单元格之间的空白，默认为2px
width像素值或百分比规定表格宽度
height像素值或百分比规定表格高度

2.4表格结构体标签 :

<thead></thead>
<tbody></tbody>

2.5合并单元格:

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

3.列表标签 

3.1无序列表 ：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

3.2有序列表:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

3.3自定义列表:

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
</dl>

4.表单标签 :

4.1表单的组成：表单域、表单控件、提示信息

4.2表单域：

<form action="url地址" method="提交方式"></form>

4.3表单控件（表单元素）

   4.3.1输入表单元素：

<input type="属性值"/>

 type属性的属性值：

属性值描述
button定义可点击按钮
checkbox定义复选框
file定义输入字段和"浏览"按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被淹没
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器
text定义单行的输入字段，用户可在其中输入文本。默认宽度为20字符。

 除type属性外，<input/>标签还有其他很多属性，其常用属性如下：

属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度

   4.3.2绑定表单元素标签：

<label></label>

   4.3.3下拉列表标签:

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
</select>

    4.3.4文本框标签

<textarea row="3" cols="20">
文本内容
</textarea>


 

更多推荐

html语法大全