HTML

HTML

网页是由一种叫HTML的技术编写的。
​
HTML：Hyper Text Markup Language 超文本标记语言。
​
1_超文本： 超过普通文本，普通文本只能看。
​
网页不但有文本，还有图片，视频，音乐。
​
文本还可以设置大小，颜色，点文本还可以进行页面跳转。
 
​
2_标记语言： 
网页由各种各样的标记（标签）组成，这些标签有着特殊的作用，
只有浏览器去解析这些标签符号，才明白其中的含义。
​
​
注意：
​
编程语言： 有结构控制，有分支，有循环，有顺序结构。
​
标记语言没有这些结构。它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，
可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符号解释和显示其标记的内容，
对书写出错的标记将//不指出其错误，且不停止其解释执行过程。
​
网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析。
​
不同的浏览器之间是有差异，同一个网页运行可能会不同。

HTML的基本结构

标签	作用
html	网页的根元素，只能有一个根元素
head	网页的头部，可以指定网页的标题
body	网页的主体部分，我们的内容就写在主体中。
<!--注释-->	注释嵌套：HTML的注释不能嵌套

HTML标签的分类

按是否有主体分

有否有主体	格式
有主体标签	每个标签都有开头和结尾，中间包含内容。如：<font>主体</font>
没有主体标签	标签没有主体，自己开头自己结尾。如：<br/>

按是否换行

标签分类	特点
块标签	每个标签单独占一行，自动换行。如：<h1>，<div>
内联标签	标签没有换行的功能，后面的标签紧挨着上一个标签的。如：<font>，<span>

语义化标签

语义化就是你看到某个标签就知道它是干什么的，见名知意。
​
特点如下：
​
1_提升浏览器对网页的可访问性。
​
2_有利用百度等搜索引擎的优化。
​
3_对于开发者来说，结构更加清晰，利于文档的维护。
​
4_方便不同的设备识别网页的内容。

HTML5常用的语义化标签

这些标签主要用于网页的整体布局，它们功能是相同。

语义化标签	作用
<header>	用于网页的页眉，页眉通常用于设置网站标志、主导航、全站链接以及搜索框。
<nav>	用于页面的导航，仅对文档中重要的链接群使用。
<main>	页面主要内容，一个页面只使用一次。
<section>	具有相似主题的一组内容，比如：网站的主页可以分成介绍、新闻条目、联系信息等条块。
<footer>	用于网页的页脚，只有当父级是body时，才是整个页面的页脚。

文本标签

标签名	标签描述	常用属性
h1~h6	表示每一级标题，1级标题最大，6级标题最小	align： 对齐的方式center居中、right 右对齐、left 左对齐。
hr	在网页中描绘水平线	width: 指定线宽度size: 指定线的粗细color: 颜色
font	HTML4中的标签，设置颜色，字体，大小	color：颜色 face：字体
b	加粗	加粗文字放在主体中
i	倾斜	文字放在主体中
br	换行	无主体标签
p	分成不同段落，没有首行缩进，每段之间有间隔	title：鼠标移上去，出现提示的信息

列表标签

ol-li     
type属性说明1数字，默认值a,A字母i, I罗马 
​
有序列表，可以使用数字、字母、罗马数字进行编号ol表示列表的容器，
<ol type=”A”></ol>li表示列表中的每一项
​
ul-li
type属性样式
disc    ● 默认
circle  ○
square  ■ 
​
无序列表，可以使用三种图标ul表示列表的容器，
​
<ul type=”circle”></ul>li表示列表中的每一项
​

块标签与内联标签

标签	作用	特点
span	这两个标签功能是相同的，都在网页上不显示内容。用于网页的布局，在逻辑上将网页的内容分成不同的部分。	是内联标签，不换行。用于一些小的文本块布局
div	是块标签，换行，每个div单独占一行。用于网页大的布局。

实体字符/转义字符

语法：

所有的实体字符以&开头，以;结尾。如：

&lt; <
&gt; >
&nbsp; 空格

图像标签

<img src="图片路径"/>  
用于在网页中添加图像。

常用属性

属性名	作用
src	表示图片的路径，采用相对路径。
width	指定图片的宽度，如果只指定宽，则高度按比例缩放
height	指定图片的高度
alt	图片如果丢失，显示的替代文字
title	鼠标移上去的时候，显示文字提示信息

链接标签

作用

让一个文本或图片可以点击，点击文本或图片以后跳转到其它的网页。

可以是同一个服务器中的网页，也可以是其它的服务器。

<a href="链接地址">文字或图片</a> 
​
<a href="mailto:xiaoming@126.cn"></a>
打开发邮件的客户端，给指定邮箱发邮件。

常用属性

属性名	作用
href	点这个链接要跳转到的页面地址，可以是本服务器页面，也可以是其它服务器。
target	self：在当前窗口中打开页面，默认值blank：在新的窗口或标签页中打开
title	鼠标移上去的时候，显示文字提示信息

<!--href=""-->
<!--href="#"-->
<!--href="javascript:;"-->
<!--href="javascript:void(0)"-->
//都为本页不动

表格标签

标签名	作用
table	表格的容器
tr	代表一行，包含 td或th
th	列标题：加粗，居中
td	一个单元格，一列，默认左对齐
caption	表格的标题
thead	不显示内容，在逻辑上将表格分成不同的部分。表格头部
tbody	表格主体，无论有没有写tbody，某些浏览器都会在解析的时候生成一个tbody标签，建议人工书写tbody标签。
tfoot	表格的脚部

常用的表格属性

属性名	作用
width	宽度
border	边框的粗细
align	可以用于 table，tr，td
rowspan	跨几行
colspan	跨几列
cellspacing	指定单元格之间的间隔
cellpadding	单元格与内容之间的间隔

<!--table表格  表格居中 宽度占浏览器宽度70% 边框大小为1px  边框间距2  内边距为3-->
<table align="center" width="70%" border="1px" cellspacing="2px" cellpadding="3px">
    <!--表格标题 -->
    <caption ><h1>学生成绩</h1></caption>
    <!--tr为行 td为列 th是列标题-->
    <tr>
        <th>
            编号
        </th>
        <th>
            姓名
        </th>
        <th>
            工资
        </th>
    </tr>
​
    <tr align="center">
        <td >
            001
        </td>
        <td>
            赵云
        </td>
        <td rowspan="2">
            99
        </td>
    </tr>
​
    <tr align="center">
        <td>
            002
        </td>
        <td>
            貂蝉
        </td>
        <!--<td>-->
            <!--88-->
        <!--</td>-->
    </tr>
    <tr align="center">
        <td>
            003
        </td>
        <td>
            吕布
        </td>
        <td>
            99
        </td>
    </tr>
    <tr  align="center">
        <td colspan="2">
        总分
        </td>
        <td>
        </td>
    </tr>
</table>