HTML

2021-06-30 11:49:38

HTML5

超文本标记语言

HTML5 一些新特性：

用于绘画的 canvas 元素
video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

1.基本结构

<!DOCTYPE html>
<html>
    <!-- HTML文档中的注释 -->
    <!-- head：html文档的头部内容 -->
    <head>
        <title>网页的标题</title>
        <meta charset= "utf-8" />
    </head>
    <body>
        <!-- 在网页中显示的内容 -->
        <font color="red">hello，HTML!</font>        
    </body>    
</html>

文档声明语句: <!DOCTYPE HTML>：表示遵循html规范

html文档的标题：<title></title>

设置网页编码：常用的是utf-8和gb2312 <meta charset= "utf-8" />

2.基本标签

HTML标签的分类

双标签：有开始标签和结束标签，html、head、body。。等
单标签：单个标签，br、hr、img...等

HTML中的标签是不区分大小写的，建议使用小写

标签中可以使用属性，来设置标签的基本样式，属性需要是键值对，并且值需要用引号引起来

2.1 文件标签

HTML中的最基本的标签

html标签：html文件中的跟标签
head标签：头部标签，用于设置html一些属性、引入其他资源文件（css、JS）
body标签：主体标签，用于将内容展示在网页中。
title标签：网页标题标签

2.2 文本标签

设置网页中的文本内容

h1~h6：标题标签
p：段落标签
hr：绘制水平线
- width：宽度
- size：尺寸
- algin：对其方式
- color：颜色
br：换行标签
font：字体标签
- color：字体颜色
- size：字体的大小
i：斜体
b：加粗
del：文本划线删除
sup：上标
sub：下标
div：网页布局标签
span：行内布局标签

<!--示例-->
<h1> contents</h1>
<p>contents</p>
<hr align="center" size="5" width="200px" color="red"/>
<font color="aquamarine" size="5">contents</font>
<div id="box">
    <span style="color: red;">123121</span>5446
</div>

特殊符号

HTML	显示	描述
&lt ;	<	小于或显示标记
&gt ;	>	大于或显示标记
&amp ;	&	用于显示特殊字符
&quot ;	“	引号
&reg ;		已注册
&copy ;		版权
&trade ;		商标
&ensp ;		半个空白位
&emsp ;		一个空白

2.3 图片标签

<img src="图片路径" algin="对齐方式" width="宽" height="高" alt="图片无法显示时的提示信息" title="当鼠标悬停时的提示信息" />
<!--路径
相对路径：相对与当前的HTML文档找到文件资源，相对路径没有盘符
.代表当前路径
..当前文件的上级路径（文件夹）
绝对路径
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
-->

设置图片自身对齐：设置其外层

应用：

<!--设置背景图片
gif 和 jpg 文件均可用作 HTML 背景
如果图像小于页面，图像会进行重复-->
<body background="./img/951247.jpg">    </body>

2.4 超链接

<a herf="xxx" target="_blank">超链接</a>
<!-- 
    a：超链接，链接到其他的网页中
    target：打开的方式
        -- _self，默认值，在当前页面打开
        -- _blank：默认值，在空白页面打开
 -->
<!-- 锚记点 -->
<a name="top"></a>
<!-- 锚记链接:跳转到网页的某一个锚记点 -->
<a href="#top">top</a>

2.5 列表标签

展示一类数据

有序列表
- 用于展示排行榜之类的数据
- ol：有序列表
- li：列表中的项
无序列表
- 用于展示导航、同类型的数据信息
- ul：无序列表
- li：列表中的项
自定义列表
- dl：列表
- dt：一级
- dd：二级

2.6 iframe标签

页面上显示一个单独页面

<!--分开显示不同页面-->
<frameset rows="30%,70%">
    <frame src="register.html" >
    <frame src="getreg.html" >
</frameset>

2.HTML表格

<!--
    tr:行
    td:单元格显示数据
    th:列名
    border:边框
    cellpadding:边框到内容
    cellspacing:边框到边框
-->
<table bgcolor="aliceblue" border="5px" cellspacing="5px" cellpadding="10px">
    <!--
        thead标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
        thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
        tbody 元素用于对 HTML 表格中的主体内容进行分组 
        tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
    -->
    
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
    </tr>
</table>
<!--合并2列-->
<td colspan="2">Data1</td>
<!--合并2行-->
<td rowspan="2">Data3</td>

3.HTML表单

<form action="/" method="post">
    <!--表单元素-->
    <!--输入框 input:文本、密码、按钮、复选、文件、时间等-->
    名字:<input type="text" name="name" id="user" required="required" maxlength="10" placeholder="输入名字" /><br>
    单选:<input type="radio" value="1" name="sex"> <input type="radio" name="sex" value="0" /><br>
    复选:<input type="checkbox" name="hobby" id="" value="1" />
    <input type="checkbox" name="hobby" id="" value="2" />
    <input type="checkbox" name="hobby" id="" value="3" />
    <input type="checkbox" name="hobby" id="" value="4" />
    <!--下拉列表    select: option-->
    地址:<select name="address">
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
    </select>
    <!--多行文本 textarea-->
    <textarea name="text" rows="2" cols="10">text</textarea>
    <input type="submit" value="提交" />
</form>

action为跳转页面

method属性规定如何发送表单数据,分别为get和post:

1.get

数据量要小于1024字节
表单提交数值在地址栏显示，安全性低
不能上传，不支持二进制
速度较快

2.post

数据量不受限制
信息进行了隐藏，安全