31 HTML

锦沐karas
200 阅读8分钟

1 HTML介绍

HTML是指超文本标记语言，是一门主要用于网页开发的编程语言。

下面是一个简单网页代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
    欢迎来到HTML的世界
</body>
</html>

从上面代码可以看出：

  • < html >标签它代表当前页面是一个HTML
  • < head> 标签中可以声明HTML页面的相关信息
  • < body>标签主要用于显示页面信息
  • 标签要有开始，有结束，成双成对出现
  • 开始标签和结束标签之间的内容就是标签的内容，若果没有内容，可以让标签自动关闭
  • 大多数标签是有属性，属性值要是用双引号括起来
  • HTML是不区分大小写的

2 HTML的排版标签

HTML注释

HTML中注释标签是以 < !-- 开头，以 -->结尾，标签中的内容就是注释，是不会显示在网页中的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
    欢迎来到HTML的世界
    <!-- 我是注释啊，不要显示我 -->
</body>
</html>

换行标签

< br/>标签就是换行标签，标签中的/可以省略不写(HTML语言是门不严谨的语言)，一般建议还是写上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
    欢迎来到HTML的世界<br/>我是下一行哟
    <!-- 我是注释啊，不要显示我 -->
</body>
</html>

段落标签

段落标签就是< P >，在< P>和< P/>之间的内容就是段落的内容，段落标签乎哉开始和结束之间产生一个空白行，并且会自动换行。

段落标签是有属性的，常用属性是align，作用是设置段落中的内容对齐方式，可取值left，center，right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
    <p>我是左对齐</p>
    <p align="center">我是居中对齐</p>
    <P align="right">我是右对齐</P>
</body>
</html>

水平线标签

< hr>标签会在页面上产生一个水平线，对于水平线线标签来说有属性：

  • align: 可取值left，right，center，代表水平线位置
  • size: 代表水平线粗细
  • width: 水平线宽度
  • color：水平线的颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
 我
 <hr size="5" color="red">
 是
 <hr size="10" width="100" color="blue">
 我
 <hr>
</body>
</html>

其中size="5"中的5是默认单位，是“像素”，当然也可以使用百分比，比如size="50%"

区分标签

div是一个块标签，用来进行布局，普通的div是没有什么效果的，只有与css结合后，才可以对页面进行排版，所以div与span都是"容器"的作用，具体区别是：

  • div会自动换行，我们成这样的标签为块级元素
  • span标签是不会自动换行，我们称它为行内元素
  • div是整体划分区块，而span是局部划分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
<div>我是div</div>
<div style="width: 100px;height:100px;background:pink;">我也是div</div>
</body>
</html>

字体标签

< font>就是字体标签，可以设置字体，字体大小以及颜色，常用属性如下：

  • face:用来设置字体
  • size：设置字体的大小，大小只能在默认设置1-7之间取值
  • color：设置字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
    <font face="宋体" size="7" color="#abc">我是字体</font>
    <font face="隶属" size="5" color="#0EF">我也是字体</font>
</body>
</html>

标题标签

标题标签有< h1>到< h6>，其中h1是最大，而h6是最小，代表的是标题，会自动换行，字体加粗，标题与标题之间会有一定的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
   <h1>我是标题h1</h1>
   <h2>我是标题h2</h2>
   <h3>我是标题h3</h3>
   <h4>我是标题4</h4>
   <h5>我是标题5</h5>
   <h6>我是标题6</h6>
</body>
</html>

格式化标签

格式化标签主要有：

  • < b>字体加粗
  • < i>字体倾斜
  • < del>删除线
  • < u> 下划线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
   <b>小笼包</b><br>
   <i>蒸饺</i><br>
   <del>豆腐脑</del><br>
   <u>蛋汤</u>
</body>
</html>

列表标记

列表分为有序列表和无序列表两种。

有序列表是 ol，常用属性是：

  • type='A'表示字母排序，type='I'则代表罗马排序
  • start="3"，代表序列从3开始计数

无序列表是ul，常用属性是：

  • type="disc"是默认的，实心圆图案
  • type="square"方块图案
  • type="circle"空圆心图案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
   <ol type="1">
       <li>车厘子</li>
       <li>樱桃</li>
       <li>番石榴</li>
   </ol>
   <ul type="circle">
       <li>刘备</li>
       <li>张飞</li>
       <li>关羽</li>
   </ul>
</body>
</html>

图像标签

图像标签< img>可以在网页中插入一图片，常用属性：

  • src：图片的路径信息
  • width：图片宽度
  • height：图片高度
  • border：设置图片边框
  • alt：当图片无法正常显示出来时，默认显示的文本信息
  • title：鼠标悬停在图片上，默认显示的文本信息
  • align：图片附件上文件的对齐方式，可取值left，right，middle，top，以及bottom
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
 <img 
    src="img/u=2050446265,2844443437&fm=26&gp=0.jpeg"
    width="50%"
    height="50%"
    border="1"
    alt="图片加载失败"
    title="李庚希"
    align="middle"
    
 />
</body>
</html>

超链接标签

< a>标签就是超链接标签，可以实现跳转到其他页面的操作，超链接的内容可以是文本，也可以是图片，常用属性是：

  • href代表莫们要跳转的路径
  • target 规定在何处打开这个链接，可取值：_blank在新窗口打开； _self是默认取值，在本窗口打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
<a href="http://baidu.com" target="_blank">
    <img 
    src="img/u=2050446265,2844443437&fm=26&gp=0.jpeg"
    width="50%"
    height="50%"
    border="1"
    alt="图片加载失败"
    title="李庚希"
    align="middle"
    />
</a>
</body>
</html>

表格

< table>就是表格标签，常用属性有：

  • border：边框，取值是以像素为单位
  • width：表格的宽度
  • align：表格的对齐方式，取值有：left，right，center
  • cellspacing：单元格间距，通常设置为0表示单线表格

< tr>表格中的行，常用属性有align代表表格内容的对齐方式，可以取值left，right，center

< td>代表表格的数据单元格，常用属性有：

  • colspan：指示列的合并
  • rowspan：指示行的合并
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
<table border="1" width="400px" align="center" cellspacing="0">
    <tr align="center">
        <td colspan="3">计划统计表</td>

    </tr>
    <tr>
        <td rowspan="3">收入金额</td>
        <td>5</td>
        <td>6</td>

    </tr>
    <tr>
        <td>8</td>
        <td>9</td>

    </tr>
    <tr>
        <td>11</td>
        <td>12</td>

    </tr>

</table>
</body>
</html>

表单标签

< form>就是表单标签，可以将我们录入的信息发送到服务器，简单来说，通过表单可以将要提交的数据提交到指定的位置。

form表单的属性有：

  • action：表单数据提交的目的地
  • method：表单提交的方式，有两种分别是get和post，两种方式的区别是：get提交时，适合传输数据量小的，提交方式是明文提交(在浏览器url中会显示出来提交的数据信息)；post提交，适合传输数据量大的，提交方式是秘文提交

form表单的元素(控件):

  • < input>元素的type属性值有:

    • text：默认值是普通的文本，取值有placeholder代表提示文本，除此之外maxlength属性代表最多能输入的字符数量
    • password：代表是密码输入框
    • checkbox：多选框和复选框，取值为checked代表被选中
    • radio：单选按钮
    • file：上传文件
    • reset：重置按钮
    • submit：提交按钮
    • button：普通按钮

  • < select>下拉列表，其中：

    • < option>代表列表中的项，取值为selected则代表默认选中

  • < textarea>是文本域，可以通过cols和rows属性来规定文本域的尺寸，一般建议通过css来控制尺寸

  • < button> 按钮，在form表单中< button>和submit是一样的，但是不在form表单中时，就只是普通按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
<body>
<form action="baidu" method="GET">
    <p>账号：<input name="a" type="text" placeholder="请输入账号" maxlength="10"></p>
    <P>密码：<input name="b" type="password"></P>
    <p>爱好：
        <input name="hobby" type="checkbox" checked="checked">学习
        <input name="hobby" type="checkbox">睡觉
        <input name="hobby" type="checkbox">看书
    </p>
    <P>性别:
        <input type="radio" name="sex">男
        <input type="radio" name="sex" checked="checked">女
    </P>
    <P>头像:<input type="file"></P>
    <p>血型:
    <select>
        <option>O型</option>
        <option>A型</option>
        <option selected="selected">B型</option>
        <option>C型</option>
    </select>
    </p>
    <p>个人简介：
        <textarea cols="10" rows="5"></textarea>
    </p>
    <p>
        <input type="reset" value="清空">
        <input type="submit" value="提交">
        <input type="button" value="取消">
        <button>保存</button>
    </p>

</form>
<button>测试</button>
</body>
</html>

注意事项：

  1. 所有表单中的元素都要具有名称，方便提交到服务器后，方便将多个元素区分开来
  2. 单选框要想可以一次只选择一个，要具有相同的name值
  3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

框架标签

通过< framset>和< frame>框架标签可以定制HTML页面布局，可以理解为：用多个页面拼装成一个页面，当时需要注意的是框架标签是不能和body标签共存的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
    <frameset rows="10%,*,13%">
        <frame src="top.html"></fram>
        <frameset cols="15%,*">
            <frame src="left.html"></fram>
            <frame src="right.html"></fram>
        </frameset>
        <frame src="foot.html"></fram>
    
    </frameset>
</html>

其他标签与特殊字符

< meta>标签必须写在< head>标签之间。

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

第一句是设置字符编码：utf-8

第三句中viewport是显示窗口，数据是文本内容content="width=device-width, initial-scale=1.0"，也就是显示窗口宽度是客户端的屏幕宽度，显示的文字和图形的初始比例是1.0

第二句是处理兼容性问题，设置任何IE版本都以当前版本所支持的最高标准模式渲染。

使用mata标签实现页面加载后在指定的时间后跳转到指定页面

<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

< link>标签来到入CSS，注意该标签也必须写在head标签中。

HTML的特殊字符，比如空格需要使用&nbsp，问号需要使用&iquest，等等，总而言之，当使用到特殊字符时需要注意一下。

3 HTML5新特性

HTML5与HTML4相比较而言，多了这些新特性：

  1. 大小写不敏感(属性、标签、属性的值)
  2. 引号可以省略
  3. 省略了结尾标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是HTML</title>
</head>
    <body>
        <inPUT tyPe="passWord"/>
        <input type=password>
        <P>我是新特性
        
    </body>
</html>

底层还是HTML帮我们补全代码的，所以建议不要省略结尾标签。

HTM5还增加了语义化标签，在HTML4中所有的容器标签都使用div，一旦div很多，就很难区分开来，为此增加了语义化标签，具体如下：

  • section标签：页面中内容区域，部分，页面的主体
  • article标签：文章
  • aside标签：文章内容之外的，标题
  • header标签：头部，页眉，页面的顶部
  • hgroup标签：内容和标题组合
  • nav标签：导航
  • figure标签：图文并茂
  • foot标签：页面的底部

媒体标签

在网页上播放视频，就要使用< video>，属性有：

  • src:媒体资源文件位置
  • controls：控制面板
  • autoplay：自动播放
  • loop：循环播放

新增表单控件

< inuput>，修改type属性：

  • color：调色板
  • date：日历
  • month：月历
  • week：周历
  • number：数值域，设置属性min最小值(默认是1)，max最大值以及step递增量
  • range滑块
  • search搜索框

< progress/>进度条 < mark>高亮 < datalist>联想输入框，其中选项用< option>

avatar
文章
阅读
粉丝