前端小白学习路线及知识点汇总（一）-- HTML-CSDN博客

本文链接：https://blog.csdn.net/Si_Yu_/article/details/106050579

前端小白学习路线及知识点汇总（一）-- HTML

本系列主要分享本人在初学前端时所整理的一些基础知识点，不全但是常用，希望能给新学习前端的同学一个参考

一、结构（骨架）标签：
1.<html></html>：HTML标签（根标签）
2.<head></head>：头部标签，head中必有title
3.<title></title>：标题标签（网页标题）
4.<body></body>：主体标签
二、HTML常用标签：

标题标签（内容）：<h1> — <h6>,双标签
段落标签：<p></p>,双标签
换行标签：<br />,单标签
文本格式化标签：
（1）加粗：<strong></strong>或<b></b>
（2）倾斜：<em></em>或<i></i>
（3）删除线：<del></del>或<s></s>
（4）下划线：<ins></ins>或<u></u>
盒子标签：
（1）<div></div>,大盒子，一行仅有一个
（2）<span></span>,小盒子，一行可以多个
6.图像标签：<img src=“图片文件名” /> src为必须属性，其他属性：
（1）alt：替换文本（2）title：提示文本（3）width：图像宽度
（4）height：图像高度（5）border：图像边框宽度
7.超链接标签：<a href=“跳转目标” target=“目标打开方式”>文本或图像</a>
href为必须属性，指向链接去向；target为其他属性，为新窗口打开方式 _self为当前窗口打开， _blank为新窗口打开，herf属性为javascript：；可以阻止链接跳转
8.注释标签<!- -文本- -> 或者快捷键Ctrl+ /, 即同C语言中注释“//”

特殊字符：
1.空格符 &nbsp
2.小于号 &lt
3.大于号 &gt
4.和号（&） &amp

三、HTLM标签：
(一)表格：
1.表格标签：
（1）定义表格：<table></table>
（2）定义表格中的行：<tr></tr>,必须嵌套在（1）中
（3）定义每个单元格：<td></td>,必须嵌套在（2）中
（4）td为table data，即单元格内容
（5）表头标签：<th></th> th为table head，为表格第一行或第一列，内容加粗居中显示
2.表格属性:align , border , cellpadding , cellspacing , width , height
3.表格结构标签：<thead>标签表格的头部区域、<tbody>标签表格的主体区域
4.合并单元格：（1）跨行合并：rowspan=“合并单元格个数”（2）跨列合并：colspan=“合并单元格个数”
（二）列表:
（1）无序列表：<ul>
<li>列表项1</li>
<li>列表项2</li>
……
</ul>
（2）有序列表：<ol>
<li>列表项1</li>
<li>列表项2</li>
……</ol>
（3）自定义列表：列表下的项目都是对第一个的解释说明
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
……
</dl>
（三）表单：（收集用户信息）
由表单域、表单控件（表单元素）和提示信息三个部分构成。

表单域：<form></form> 属性：action , method , name 视频14
表单控件（表单元素）：
（1）<input type=“属性值” /> 单标签
type属性值及其描述：button ，checkbox , file , hidden , image , password , radio , reset , submit , text 视频15
name 属性：每一个表单元素要有自己独一无二的name
value属性：表单元素中自带的文本
checked属性：input元素首次加载应被选中
maxlength属性：输入字段字符的最大长度
（2）<label></label> 可让点击input选中框时不必非点对位置
label中有for属性，相对应的input中有id属性
（3）<select>标签：下拉表单元素
<select><option>选项1</option>
<option>选项2</option>
<option>选项3</option></select>
option中有属性selected ，可设置其为默认选中项
（4）<textarea>标签：文本域（定义多行文本输入的控件）
<textarea>
文本内容
</textarea>
每一个表单元素都应该有自己的name值，以区分彼此。
实际开发中不会直接用链接a，而是将其包含在li中用链接（li+a）

HTML5新特性

HTML5新增的语义化标签
<header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>定义某个区域
<aside>:侧边栏 <footer>:尾部标签
注意：这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
移动端更喜欢这些标签
HTML5新增的多媒体标签可嵌入视频音频，而不用flash等插件
（1）音频 <audio> 格式：MP3，Wav，Ogg
<audio src=“文件地址” controls=“controls”><audio>
（2）视频 <video> 格式：MP4，WebM，Ogg
<video src=“文件地址” controls=“controls”><video>
属性值：
HTML5新增的input表单
属性值：重点记住number，tel，search
HTML5新增的表单属性
属性：重点记住placeholder ，multiple