HTML基础
时间：2023-08-29 13:48:01 | 来源：网站运营
时间：2023-08-29 13:48:01 来源：网站运营
HTML基础：
一：结构化标记
(描述标题和段落的元素)
1.标题：<h1> <h2> <h3> <h4> <h5> <h6>
2.段落：<p>
3.粗体：<b> 斜体：<i>
4.上标：<sup> 下标：<sub>5.换行符：<br />
6.水平线：<hr/>
二：语义化标记
(表达特定含义的元素。不影响网页结构，却为所在页面添加额外信息)
1.加粗：<strong> （表示其中的内容十分重视。粗体显示）
2.强调：<em> (起强调作用。斜体显示）
3.引用：<blockquote> (标记占用一整段的较长引用。缩进显示，但应该用css来实现缩进） <q> (标记占用较短的引用。双引号显示，但IE浏览器不支持）
4.缩写词：<abbr> 首字母缩写词：<acronym>
5.引用：<cite> 可以用来表明引用（书籍、电影、报告）的来源。浏览器显示为斜体。
6.定义：<dfn> 表示一个新术语的定义。有些浏览器显示为斜体，Safari和Chome不改变外观。
7.设计者详细信息：<address>包含页面设计者的联系详情（物理地址/电话/电子邮箱）浏览器显示为斜体。
8.内容的修改：<ins>用来显示已经插入到文档中的内容（下划线显示） <del>用来显示已经从文档中删除的文本（删除线显示） <s>用来表示不准确或者不相关却不应删除的内容（穿过的线条显示）
三：列表、链接、图像、表格、表单、其他标记
1——列表
1.1有序列表：<Ol>创建有序列表（type属性定义编号类型——数字、字母、罗马数字）（不过应该利用CSS中的list-style-type属性）。<li>列表的每一个项目（浏览器默认缩进显示）
1.2无序列表：<ul>创建无序列表。<li>列表的每一个项目（同上）
1.3定义列表：<dl>创建定义列表，并且通常包含一系列术语及其定义。 <dt>用来包含被定义的术语<dd>包含定义 我的本地演示
1.4嵌套列表：可在<li>元素中放入另一个列表来实现嵌套列表
2——链接
2.1 指向其他网站的链接：https://www.google.com">google href的值（是另一个网站的完整地址--绝对的URL）设定了链接的目标
2.2 指向同一网站其他页面：<a href="index.html">主页</a> href的值（是目标页面的相对地址--相对URL）
2.3 email链接:<a href="mailto:xx@xx.xx">xx</a>
（email链接的href值以mailto:开始，接收件人的email地址。单机会启动计算机的email程序，并自动新建一份邮件，并添加收件人地址为链接中的地址）
2.4 在新窗口打开链接：<a href="xx" target="_blank">xx</a>（一般尽量避免使用，最好注明在新窗口打开）
2.5 链接到当前页面的某个特定位置：首先确定目标位置，并利用目标位置标签的id属性值来到达指定位置，<a href="#top">top</a> （此链接以#开头，加目标id值）
2.6链接到其他页面（网站内部或者其他网站）的某个特定位置: http://www.xx.com/#bottom">xx（其他页面要有相应的id）
3——图像
3.1 <img>：
<img src="images/lz.jpg" height="280" width="340" alt="龙珠" title="七龙珠" align="left">src:图像资源的位置，通常是站内某个图像的相对URL；alt：当无法查看图像时的说明文本
title：附加信息，当鼠标悬停在图像上时显示；
align:旧代码，图像的水平对齐。h5不在支持这一特性。表面页面的其他部分怎样环绕在图像周围。left，将图像左边对齐，文本环绕在图像的右边。right反之。
align:旧代码，图像的垂直对齐。h5不在支持这一特性。top，将周围文本第一行与图片顶端对齐。middle，文本第一行与图片中间对齐。bottom，文本第一行与图片底端对齐。
3.2 HTML5图形和图形说明：
<figure> <img src="images/11.jpg"> <figcaption> 耶！</figcaption> </figure>图像往往带有说明。HTML5引入新的<figure>元素包含图像以及图像的说明，并且这两项时相关联的。<figcaption>图像说明（只要说明相同，就可以在figure添加多个图片）
4——表格
4.1 表格基本结构：<table>创建表格；<tr>行；<td>列。
4.2 表格的标题<th>:同<td>用法。可用scope特性值row行标题col列标题（粗体显示）
4.3 跨列<colspan>，跨行<rowspan>
4.4 长表格：表格的标题应放在<thead>中；表格主体<tbody>；表格脚注<tfoot>。
4.5
旧代码，宽度和间隔：width特性：表格宽度或某个单元格宽度；<table>的 cellpadding特性：每个单元格增加内边距
4.6 旧代码，边框和背景：border特性：table或td的边框；bgcolor特性：表格或单元格 背景颜色
5——表单
5.1 表单结构：<form action="xxx" method="post"></form>
action特性：服务器上的一个页面URL，接收表单信息
method特性：表单的提交有两种方式——get（短表单，只从web服务器上检索数据的 情形，不发送要在数据库中添加和删除的数据）和post（非常长，允许用户上传文件，包 含敏感信息如密码，向数据库中添加和删除数据）；如果不使用method默认时get方式发 送
id特性：在页面上众多元素中对表单唯一性标识
5.2 <input>：<input>元素创建不同的表单，type特性值决定了控件。name特性对表单控件进行标识并与输入的信息一同发送到服务器
5.2.1 单行文本框：type="text"；size是旧特性（指定文本框的宽度）；maxlength 限制在文本区输入的字符的数量
5.2.2 密码框：type="password"；size；maxlength；
5.2.3 单选按钮：type="radio"；name；value（选中时发送到服务器的值）； checked：选中的值
5.2.4 复选框 ：type="checkbox"；name；value；checked；
5.2.5 文本上传域：type="file"；
5.2.6 提交按钮：type="submit"；name；value；
5.2.7 图像按钮：type="image"；src；alt；width；height；
5.2.8 隐藏控件：type="hidden" ；不显示；
5.3 多行文本框：<textarea></textarea> 旧代码：cols特性指文本域宽度；rows行数
5.4 下拉选择框：<select>创建下拉列表框，里面包含多个<option>（value；select）
多选列表框：给<select>添加size（一次性展示的数量）特性将下拉选择变成能显示多 个选项的列表框；再添加multiple="multiple"特性允许选择多个选项。
5.5 按钮：<button>；更好的显示，允许其他元素出现在<button>元素内（文本/图像）。
5.6 <label>：表单控件的文本最好用<label>；for：标签控件标注哪一个id表单控件5.7 组合表单元素：<fieldest>将相关的表单放在其中分成一组；<legend>在其中第一行包含一个标题。5.8 html5表单验证：一般通过js验证；可给<input>加required特性使此控件自动验证；
5.8 html5日期控件：type="data"；日期输入控件。
5.9 html5邮件和URL：type="email"；URL输入控件：type="url"
5.10 搜索输入控件：type="search"；placeholder特性，单击搜索框前，框内淡显文本
四：其他标记
1. DOCTYPE（文档类型）：html存在多个版本，每个网页的开头都用一个DOCTYPE声明，告诉浏览器此页面使用了那个版本。
2. 注释 <!-- -->
3. id特性：对元素的唯一标识（字母或下划线开头）；
4. class特性：类别；一个元素可以属于多个类别，用空格将类名隔开
5. 块级元素：浏览器显示另起一行的元素；如：<h1> <p> <ul> <li>......
6. 内联元素：显示出现在他临近元素一行内的元素；<a> <b> <em> <img>
7. <div>：将一组元素集中到一个块级元素中
8. <span>：将一组元素集中到一个内联元素中；在没有其他元素适合的情况下包含一段文 本并与周围文本区别开来；包含若干个内联元素。
9. 内联框架（inline frame）：<iframe>：页面里分割的小窗口，包含另一个网页；
src特性：想要显示页面的URL；height；width；
scrolling：（H5不再支持）是否显示滚动条yes：显示，no隐藏，auto：根据需要显示
frameborder：（H5不再支持）是否显示框架边框，0：不显示，1：显示
seamless：（H5新特性）应用在不希望出现在滚动条
10. 页面信息：<meta>位于<head>中，包含所在页面的相关信息；
常用的特性：name，content通常一起出现：name是你想要设置的属性名，content是对应的值；name可以任意指定，但常用的有：
description：用语包含一段有关页面的描述信息。通常被搜索引擎用来了解内容，最多155个字符。有时会显示在搜索引擎的检索结果中；
keyword：包含一组以逗号 分隔的关键词列表（事实上已经没有明显作用了）
robots：
ps：
11. 转义字符：有些字符用于编写HTML代码并作为HTML的保留字符（< 和 >）要显示这些字符时，需要使用转义字符：<：<； >：>； &：&； "："等（查）
五：Flash、视频、音频
1.Flash：
2.HTML5向网页中添加视频：<video src（视频路径）poster（加载视频之前指定显示在播放器的图片） width（宽度） height（高度）controls（不需要值，表示浏览器需要提供默认的播放控件） autoplay（不需要值，自动播放视频） loop（不需要值，播放完重新播放） preload（告诉浏览器页面加载时做什么，有三个值：none（在用户按下播放前，浏览器不必加载视频）auto（浏览器在页面加载时加载视频）metadata（浏览器只需要收集少量视频信息，如大小，首帧图像，播放列表，持续时间））>
3.HTML5多个视频源：
4.结合
5.HTML5音频：
在线咨询
