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

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

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

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

1. 标题标签（内容）：

   —

   ,双标签

2. 段落标签：
   ,双标签
3. 换行标签：
   ,单标签
4. 文本格式化标签：
   （1） 加粗：或
   （2） 倾斜：或
   （3） 删除线：或
   （4） 下划线：或
5. 盒子标签：
   （1）
   ,大盒子，一行仅有一个
   （2）,小盒子，一行可以多个
   6.图像标签： src为必须属性，其他属性：
   （1）alt：替换文本 （2）title：提示文本 （3）width：图像宽度
   （4）height：图像高度 （5）border：图像边框宽度
   7.超链接标签：文本或图像
   href为必须属性，指向链接去向；target为其他属性，为新窗口打开方式 _self为当前窗口打开， _blank为新窗口打开，herf属性为javascript：； 可以阻止链接跳转
   8.注释标签 或者快捷键Ctrl+ /, 即同C语言中注释“//”

特殊字符：
1.空格符  
2.小于号 <
3.大于号 >
4.和号（&） &

三、HTLM标签：
(一)表格：
1.表格标签：
（1）定义表格：

（2）定义表格中的行：,必须嵌套在（1）中
（3）定义每个单元格：,必须嵌套在（2）中
（4）td为table data，即单元格内容
（5）表头标签： th为table head，为表格第一行或第一列，内容加粗居中显示
2.表格属性:align , border , cellpadding , cellspacing , width , height
3.表格结构标签：标签 表格的头部区域、标签 表格的主体区域
4.合并单元格：（1）跨行合并：rowspan=“合并单元格个数”（2）跨列合并：colspan=“合并单元格个数”
（二）列表:
（1）无序列表：

• 列表项1


• 列表项2

……

（2）有序列表：

1. 列表项1


2. 列表项2

……

（3）自定义列表：列表下的项目都是对第一个的解释说明

名词1

名词1解释1

名词1解释2

……

（三）表单：（收集用户信息）
由表单域、表单控件（表单元素）和提示信息三个部分构成。

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

HTML5新特性

1. HTML5新增的语义化标签
   
   :头部标签

   :导航标签

   :内容标签

   定义某个区域
   

   :侧边栏

   :尾部标签
   注意：这种语义化标准主要是针对搜索引擎的
   这些新标签页面中可以使用多次
   在IE9中，需要把这些元素转换为块级元素
   移动端更喜欢这些标签
2. HTML5新增的多媒体标签 可嵌入视频音频，而不用flash等插件
   （1） 音频
3. HTML5新增的input表单
   属性值：重点记住number，tel，search
4. HTML5新增的表单属性
   属性 ：重点记住placeholder ，multiple