【云+社区年度征文】html基础语法总结
原创
@TOC
一.HTML是什么？
HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。
二.HTML文档结构
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>三.元素
1.按单/双标记划分
单标记：
<br/> <hr/> <img/> <input/> <link/>双标记：
<html> <head> <title> <body> <table> <tr> <td>
<span> <p> <form> <h1> <h2> <h3> <h4> <h5> <h6>
<style> <b> <u> <strong> <i> <div> <a> <script>
单标签：只有一个<>组成，例如<br/>
双标签：由<></>组成，有始有终，<>表示标签开始，</>表示标签结束，例如<div>...</div>
2.按块状/行内元素划分
|块状元素 | 解释 | 行内元素 | 解释 |
|--|--|--|--|
| div | 定义文档中的分区或节 | a | 定义链接 |
| h1-h6 | 定义标题 | b | 字体加粗 |
| ui,li | 定义无序列表 | code | 定义计算机代码文本 |
| ol,li| 定义有序列表 | em | 定义为强调的内容 |
| p | 定义段落 | img | 定义图片 |
| form | 定义表单 | input | 输入框 |
| hr | 定义水平线 | label | 为input元素定义标记 |
| pre | 定义预格式化文本 | span | 组合文档中的行内元素 |
| table,tr,td…| 定义表格 | sub | 定义下标文本 |
| dl,dt,dd | 自定义列表 | sup | 定义上标文本 |
| | | textarea | 定义多行输入框 |
| | | strong | 语气更强的强调内容 |
3.块状元素和行内元素的互相转换
1、display
display:block转换为块状元素
display:inline转换为行内元素
display:inline-block转换为行内块状元素
注意：如果把一个div设置成inline也要遵守行内元素的特点。
2、float
当把行内元素设置为float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了中间莫名的空白。
3、当为行内元素进行定位时，absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。
行内元素和块级元素的区别，各自的特点：
1、块状元素，总是在新行上开始，默认宽度是它容器的100%，也可以设定宽度和高度，内联元素，和其他元素在一行，设置宽度和高度不起作用。
2、块状元素能容纳其他块状元素或者内联元素。内联元素只能容纳文本或其他内联元素（如果内联元素容纳块状元素都会显示怪异）。
3、块状元素和内联元素一些样式属性不同。
块状元素可以设置width/height/line-height/margin/padding>
行内元素设置width/height无效，设置line-height样式怪异，设置margin和padding的时候左右有效果，上下没有效果。
四.重点
1.图像链接
在一个\<a>标签中加上bai一个\<img>标签内容，即可让该\<img>拥有一个超链接。然后可以在后面继续写文字，此文字就会显示成超链接，点击该文字即可进入超链接。
下面实例：
<a href="www.baidu.com"> <img border="0" src="/i/eg\_buttonnext.gif" /></a>2.导航菜单
①列表
有序列表 ol li
type：有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式。
start：属性值位数字，表示从type类型的第几个数字开始，有点绕，比如当你选的type=“a”,start=“3”，表示选择的是小写字母类型，从第三个字母c开始充当列表前缀。
<ol >
<li>dd</li>
<li>aa</li>
<li>dd</li>
</ol>
无序列表 ul li
列表默认的前缀样式是实心圆其实是disc。
ul标签中的属性是type，type属性值有disc（实心圆默认）、circle（空心圆）、square（实心正方形）、none（取消前缀）。
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
自定义列表 dl dt dd
<h3>自定义列表</h3>
<dl>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
</dl>
1.有序列表和无序列表之间的区别是：前缀的不同，有序的是有大写字母和小写字母、数字、罗马数字等，而无序列表是实心圆、空心圆、实心正方形。
2.但是共同点是都有前缀。
3.而自定义列表与有序无序的区别是没有前缀，而且是有缩进
②超链接
基本语法：\<a> 超链接</a>
例如：\<a href="https://zxfdog.blog.csdn.net/">花狗Fdog的博客</a>
属性：
3.表单
input（包含多种输入控件）:
select(下拉列表):
用<option>定义下拉列表框中的可用选项。
下拉选择框支持多选multiple：multiple="multiple"。input默认选中属性 checked，默认选中属性 selected。
例如：
<form>
用户名：<br />
<input type="text"><br />
手机号：<br />
<input type="text"><br />
密码：<br />
<input type="password"><br /><br>
<select style="width: 170px;">
<option value="共青团员">共青团员</option>
<option value="群主">群主</option>
<option value="党员">党员</option>
</select><br><br>
<input type="button" value="提交" style="width: 150px;"/>
</form>
4.表格
表格标题由<caption>标签定义。
由 \<th> 标签定义表头单元格 ，表头自动加粗。
由\<td>定义，字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
由<tr>定义，每个表格均有若干行。
rowspan属性用于合并行，colspan属性用于合并列，在\<th>标签中添加。
例如：
<table border="1"> <!--表格开始-->
<caption>博主列表</caption> <!--这是本表格的标题-->
<tr> <!--第一行开始-->
<td>姓名</td> <!--第一个单元格-->
<td>性别</td>
<td>年龄</td>
</tr> <!--第一行结束-->
<tr>
<td>花狗Fdog</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>君莫笑</td>
<td>男</td>
<td>21</td>
</tr>
</table> <!--表格结束-->
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。