【前端学习之HTML总结】

HTML学习

---

前言说明

一：网页
网页是图片，链接，文字，声音，视频等元素组成的，其实质上就是一个HTML文件。网页生成制作是由前端人员书写HTML文件，然后经过浏览器渲染，点开浏览器就可以看到网页
二：HTML
HTML指的是超文本标记语言，用来描述网页。
HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。
三：浏览器
常用的五大浏览器：IE,Safari,Opera,火狐，谷歌
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面（渲染引擎）
四：Web标准
构成：结构，表现，行为

构成	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学习HTML
表现	表现用于设置网页元素的版式，颜色，大小等外观样式，即指css
行为	行为指网页模型的定义以及交互的编写，现阶段学习Javascript

HTML语法规范

一：语法规范

HTML是由尖括号包围关键词组成，如< html>
标签分为单标签和双标签，双标签都是成对存在的，如 < html>< /html >,单标签同样存在.
双标签关系可以分为两类：包含关系和并列关系

HTML结构标签

一：基本结构标签

• 1.每个网页都会有一个基本的结构标签，即骨架标签，页面的内容也是在基本标签上写。
• 2.文档类型声明标签 < !DOCTYPE>文档类型声明，告诉浏览器使用哪种HTML版本显示网页<! DOCTYPE html>
• 3.lang语言种类 en定义语言为英语，zh-CN定义语言为中文
• 4.字符集 多个字符的集合，以便计算机能够识别和存储各类文字 在< head>标签内，可以通过< meta>标签的charest属性来规定html文档应该使用哪种字符编码。
• 

二：常用标签

1.标题标签
标题标签即< h1>~< h6>一级至六级（重要性递减）
< h1>一级标签< /h1>

2.段落和换行标签
< p> 段落 标签< p/>(浏览器会自动换行）
< br />换行标签

3.文本格式化标签

标签	表示
加粗	< strong>< /strong>或< b>< /b>
倾斜	< em>< /em>或< i>< /i>
删除线	< del>< /del>或< s>< /s>
下划线	< ins>< /ins>或< u>< /u>

4.< div>和< span>标签
< div>和< span>是没有语义的，他们就是一个盒子，用来装内容。
< div>这是头部< /div> 表示分割分区，即一个大盒子
< span>今日价格< /span> 表示跨度跨距，即一个小盒子

5.图像标签和路径
a. < img>标签用于定义html页面中的图像
< img src=“图像url”/>为单标签
src是< img>标签的必须属性，用于指定图像文件的路径和文件名。ps:属性即这个图像标签的特性
图像标签的其他属性：

图像标签属性注意点：

• 图像标签可以拥有多个属性，必须写在标签名的后面
• 属性之间不分先后顺序，用空格分开
• 属性=值 即key="value"格式
  

b. 路径
目录文件夹：普通文件夹
根目录：打开目录文件夹的第一层就是根目录
路径：相对路径 、绝对路径

• 相对路径：图片相对于html页面的位置。存在同一级、下一级、上一级的情况
• 绝对路径：相对电脑的某一位置或链接的位置

6.超链接标签
< a>标签用于定义超链接，作用是从一个页面链接到另一个页面
a. 链接的语法格式
< a>< /a>
即< a href="跳转目标“ target="目标窗口的弹出方式” >文本图像< /a>

属性	作用
href	用于指定链接目标的url地址（必须属性）当为href具有超链接功能
target	用于指定链接页面的打开方式，其中self默认值blank在新窗口打开方式

b.链接分类

• 1)外部链接< a href=“http://www.baidu.com” >首页< /a>

• 2)内部链接< a href=“xxx.html” >首页< /a>

• 3)空链接 < a href="# ">首页< /a>

• 4）下载链接：若href里面地址是一个文件或者压缩包，会下载这个软件

• 5）网页元素链接：视频、图片、文字

• 6）锚点链接： < a href="#名“>首页< /a> < h1 id="名”>首页介绍< h1>
  

7.表格标签
ps:表格用来展示数据，不是用来布局
a.表格的基本用法

• 1）< table>< /table>用于定义表格的标签
• 2）< tr>< /tr>用于定义表格中的行
• 3）< td>< /td>用于定义表格中的单元格

b.表头单元格< th>< /th>
c.表格属性（写到表格标签table中)
d.表格结构标签
< thead> 表格头部< /thead>
< tbody> 表格主体< /tbody>

e.合并单元格
方式：跨行合并 rowspan="合并单元格个数“ 跨列合并 colspan="合并单元格个数“
目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
步骤：

• 1）确定跨行，跨列
• 2）找到目标单元格，写上合并方式=合并单元格数量 eg:< td colspan=“2”>< /td>
• 3）删除多余的单元格

8.列表标签
a.无序列表

<ul>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ul>

b.有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol> 

c.自定义列表

<dl>
    <dt>名词</dt>
    <dt>名词</dt>
    <dt>名词</dt>
</dl>

9.表单标签
a.表单的组成：表单控件、表单域、提示信息

• 表单域是一个包含表单元素的区域 < form>标签用于定义表单域以及实现用户信息的收集和传递 <
  form>会把它范围内的表单元素信息提交给服务器
• < form action="url地址” method="提交方式“name="表单域名称”>< /form>

b.表单的控件

• input输入为表单元素,input标签为单标签 < input type="属性值“ />
  

c.< label>标签（标注标签）

• 当点击< label>标签内的文本时，浏览器会自动将焦点转到表单元素上 语法：< label for=“sex”>男< /label> < label >标签的for属性应当与相关元素的id属性相同

d.select下拉表单元素
注：在< option>定义 selected="selected"即变为默认选择

<select>
     <option>选项<option>
     <option>选项<option>
     <option>选项<option>
</select>

e.textarea文本域表单元素(大量书写文字）
< textarea rows=“3” cols=“20”>
表单样例
ps:这是博主自己的表单啊，嘿嘿嘿

HTML中的注释和特殊字符

注释：
< !–xx-- >快捷键 crtl+/
特殊字符：