HTML基础学习总结

1.< head > 网页配置< /head >，< body >网页内容< /body >

2. 中英文

3.< head >中字符集（meta元标签，不需要成对，改代码标签时需要同时改vscode右下角文件字符集）
< title >网页标题< /title>
< meta name=“Keywords” content=“关键词”>
< meta name=“Description” content=“描述”>（Keywords、Description对搜索排序有帮助）

4.< body>中
< p>段落 只有加段落标签，才能换行
< h1>一级标题< /h1> h=headline,h1-h6系列标签,h1只能放一个
<单标签>
HTML4：单标签结尾反斜杠，< meta charset=“UTF-8” />
HTML5：单标签不用反斜杠
< div class=“区分不同div的功能”>，division分割，将相关内容组合到一起，分割不同部分（盒子），重要的是结合CSS进行页面布局

5.HTML5：
空白折叠，想换行得< p>< /p>
转义字符，可以用大小于号破坏标签，可以空格。& lt; & gt; & nbsp; & copy;

6.列表

• < ul>< /ul>无序列表，unordered list，列表项只能是< li>< /li>，list item（小圆点）
  < li>可以有其他标签< /li>
  1.li不能散着放 2.ul子标签只能是li 3.li可以放任何东西
  有type属性，可以确定是圆还是方，已废弃，用css
• < ol>< /ol>有序列表，ordered list，列表项只能是< li>< /li>，list item（小1，2，3）
  < li>可以有其他标签< /li>
  1.li不能散着放 2.ol子标签只能是li 3.li可以放任何东西
  有type属性，可以确定是1还是A，已废弃，用css
  有strat属性，指定列表起始值
  有reversed属性，不需要值，可以倒序

< dl>定义列表,definition list，语义是解释说明，如电商网页底部
< dt> data term数据项
< dd> data definition数据定义

7.图片标签
< img src=“路径” alt=“图片的文字描述” width=“宽像素” height=“高像素，省略就按原始比例缩放”>
路径支持相对路径和绝对路径

8.超级链接

• < a href=“url.html” title=“鼠标提示” targer=“blank or _blank”>去第二个网页< /a>
  anchor锚，路径支持相对路径和绝对路径
  target可以在新标签页中打开网页，去别的地方

• < a href=“url.html” title=“鼠标提示” targer=“blank or _blank”>去第二个网页
  < img src=“路径” alt=“图片的文字描述” width=“宽像素” height=“高像素，省略就按原始比例缩放”>
  < /a>
  （< a>标签包裹img标签，给图片设置超链接）

• < h1 id=“asd”>< /h1>，url变成#asd，这种方式叫设置锚点，style里写css是#asd{css代码}
  < a href=“url.html#asd”>看asd的部分，可以指定到锚点（玩了一个当前页面的跳转）

• < h1 class=”asd”>，这种，style里写css是.asd{css代码}
  class与id的区别：同一个类名可以有多个HTML元素使用，而一个id只能由页面中的一个HTML元素使用。

• a标签还可以玩下载

9.音频视频标签

10.区块标签
HTML5推出了众多新的区块标签，如< section>、< main>等
（替代了div+class属性）

11.语义化标签
文本< span>文本文本
该标签是文本中的"区块"标签，本身没有显示效果，可以结合css来丰富样式
< strong>、< em>、< mark>均表示强调语义
文本< strong>文本文本

12.表单标签
表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等。

< form action="提交到的后台程序网址" method="get or post提交方式">
（可以看出element ui的上传是封装了form的）

下面是表单的控件，HTML5中还新增了很多input的type，丰富了控件种类

< input type="text" value="123 表示已填好的值" disabled>（type为text时为单行文本框，加disabled属性会锁死）

< input type="text" list=”province-list”>
< datalist id=”province-list”>
< option value=”山东”>
< option value=”天津”>
< option value=”河北”>
智能感应补全

（type为text时为单行文本框）
	（单选按钮，互斥的单选按钮应该设置它们的name为相同值，checked默认选中）

	
		男
	
	用label可以将文字和单选按钮进行绑定。（HTML5，4的话得用id和for匹配）

	（type为checkbox时可以创建复选框）

	（type为password密码框）
	
	（下拉菜单）
	
		支付宝
	

	 
	
	
	

13.表格标签
< table>
< tr>（行）
< td> （列）
< /tr>
< /table>

其他标签以及各种用法，不断补充…