Html笔记整理
<!doctype html> doctype-->文档类型(文档声明)
html 文档基本结构
<!-- html标签称为 跟标签，一个网页只能有一个 跟标签>
<html>
<head>网页的基本描述信息，一般不会展示给用户 (文档头部)
1.标题标签：<title>网页的标题</title> （文档标题））
2.设置html文档编码格式：
<1>在整个文件的最上方 写上<!DOCTYPE HTML> 声明当前文档为H5版本
<2>在：head中 写上<meta charset="编码格式">
注意：HTML编码的细节，HTML标签名不区分大小写，HTML标签可以有属性，多个属性之间用空格分开，属性的值可以用单引号,双引号
</head>
<body>网页的主体内容，展示给用户 （文档主体）
1.标题：<hn> ...</hn> --n取值 1~6 ，值越大 字越小，hn标签自己独占一行
2.段落标签：<p> ... </p>
3.换行标签：</br>
4.一条横线：<hr size="线宽" Color="颜色|英文|16进制颜色表现">
5.关于字体修饰
<i> ... </i> 字体倾斜
<s> ... </s> 删除线
<b> ... </b> 加粗
<u> ... </u> 下划线
<strong> ... </strong> 加粗
<font> ... <font> 属性
color（属性中）字颜色
face（属性中）字体
size（属性中）字体大小
6.特殊符号（拼接使用）
空格
> 大于号
< 小于号
© 商标后标识符
↑ 向上箭头
7.列表标签
<!-- 无序标签 -->
<ul>
<li> ... </li> 圆点
<li> ... </li> 圆点
<li> ... </li> 圆点
</ul>
<!-- 有序标签 -->
<ol>
<li> ... </li> 1.
<li> ... </li> 2.
<li> ... </li> 3.
</ol>
8.图片标签
1.<img src="图片路径/URL">
URL:指存储图像的位置
图片路径：可以使用 绝对路径 或 相对路径
相对路径的写法：
比如在于html文件为同目录中 有个文件夹 里面有个图片叫 图1.jpg
.\images\图1.jpg
images\图1.jpg
在html文件的上级目录中 有个文件夹 里面有个图片叫 图1.jpg
..\images\图1.jpg
.表示当前目录 ..表示上级目录
2.常用属性：
width 设置宽度
height 设置高度
alt 图片加载失败信息
title 图片的描述
9.超链接标签
1. <a href=”资源的路径”>...</a>
跳转的资源路径可以是 网站路径 或 文件路径 或 以后一个javaweb程序路径
网站路径：前面要写http://
文件路径：可写相对和绝对路径
2. 常用属性:
2.1 target = _self (在当前窗口显示目标资源)| _blank(新开启一个窗口)
2.2 定义锚点：
<a name=”锚点名”></a>
配合
<a href=”#锚点名”>回到顶部</a>
10.表格标签（学习JS JQuery 时会再一次用到）
1.<table> ... </table>
2.表格绘制基本方式：
table=表格 border=边界 bordercolor=边框色彩;边框颜色;边缘色彩 cellspacing=单元格间距 cellpadding=单元格边距
align=对齐;排列（left|center|right=左中右对齐方式） bgcolor=背景颜色 width=宽度 height=高度
<table border=”1px” bordercolor=”边框颜色” cellspacing=”单元格间距离” cellpadding=”内间距” align=”left|center|right” bgcolor=”背景颜色” width=”宽” height=”高” >
<tr> <th>表格的表头</th> </tr>
<tr bgcolor=””> -- 一对tr代表一行
<td bgcolor=””>..</td> -- 一对td代表一列
<td colspan=”跨列合并| 整数”>..</td>
</tr>
<tr>
<td rowspan=”跨行合并 | 整数”>..</td>
<td>..</td>
</tr>
</table>
11.表单标签 重点
1.表单的作用：用来收集用户信息（账号，密码等）
2. 定义表单： <form> 表单元素 </form> | 默认表单没有任何样式，必须声明表单元素才有意义。
3. 表单标签核心属性：
<form action=”” method=”POST”>
表单元素
</form>
Action属性:是一个web程序的路径资源信息，用来指定表单中信息提交到给哪个程序代码进行处理，这样的程序如何书写在servelet处进行讲解
提交到指定的网页/指定地址
Method=GET|POST : 指定表单数据提交的方式.
GET提交数据：(表单默认提交数据的方式)
1. 以地址栏拼接的方式传递数据， 语法是： url?name1=val1&name2=val2...
2. 缺点：
2.1 由于是明文传输数据， 不安全。
2.2 传输的数据量小， 大概是4KB
POST提交数据：
1. 是将数据打包成文件的方式传递
2. 优点：
2.1 安全
2.2 对传输数据量的大小没有限制
4. 表单元素：
value 是浏览器 打开后中框中出现的值
4.1 文本输入框：<input type=”text” name=”username” value="框里的默认值"/> | name属性值是未来程序获取数据的依据
4.2 密码输入框：<input type=”password” name=”password” value=”默认值”/>
4.3 提交按钮：<input type=”submit” value=”按钮文本” /> | 用于提交表单
4.4 重置按钮：<input type=”reset” value=”按钮文本”/> | 将表单内容重置为默认状态
4.5 单选按钮： <input type=”radio” name=”sex” value=”xxx”/> |
一组单选 name属性是一致的，而一组中只能有一个选项被选中
一个选项被选中时，该name对应的值是被选选项的value属性中的值
4.6 多选框: <input type=”checkbox” name=”hobby” value=”xxx”/>
一组多选按钮的值也需要一致，一组中可以有多个选项被同时选定
被选定的选项都会把该选项的value属性的值进行提交
4.7 下拉列表：
<select name=”city”>
<option value=”BJ”>北京</option>
<option value=”SH”>上海</option>
...
</select>
4.8 文本域 ： <textarea> ….. </textarea>
5. 补充表单相关
5.1 普通按钮：<input type=”button” value=”按钮” /> ---常常和超链接一起使用给超链接中套一个按钮会变得更美观
<a href="#top" ><input type="button" value="返回顶端↑"></a>
5.2 隐藏的文本框： 主要用于提交一些额外的数据， 方便与编程人员开发的。 没有任何样式。
<input type=”hidden” name=”xxx” value=”xxx” /> -- 数据会随着表单的提交而提交
5.3 文件上传元素：<input type=”file” />
5.5 几个特殊属性：这是四个不需要赋值的属性 学习JS Jquery时会再次用到
- checked 配合单选按钮或多选框使用， 代表默认选中的含义
- selected 写在下拉列表的option标签上，代表默认选中的含义
- readonly 只读，不能修改。 但是数据会随着表单提交
- disabled 禁用， 数据不会提交了
12.网站背景音乐实现方法：
标签：<bgsound>
属性：balance 设置音乐的左右均衡（一般在添加背景音乐时，我们并不需要对音乐进行左右均衡以及延时等设置）
delay 是进行播放延时的设置
loop 是循环次数的控制（loop="-1"表示音乐无限循环播放）
src 则是我们音乐文件的路径
volume 是音量设置
另一个标签：<embed>
属性：embed
<embed src="music.mp3" autostart="true" loop="true" hidden="true"></embed>。
13.日期标签：
<input type="date">
14.邮箱标签：
<input type="email">
15.数字输入框
<input type="number">
16.URL输入框
<input type="url">
</body>
</html>
注释：
<!-- -->
扩展：
页面通常结构
<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <article> 定义外部内容（如外部引用的文章） <section> 一个独立的块 <footer> 尾部
文本标签
<!-- 默认超链接 -->
<a href="http://sample-link.com" title="Sample Link">Sample</a>
<!-- 当前窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打开链接 -->
<a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>
<!-- 页面中的锚点 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>
<!-- 邮箱及电话需系统支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多个邮箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主题和内容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
<!-- 电话示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>
实体字符
实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为 & 外加实体字符名称，例如 ，第二种为 & 加实体字符序号，例如  。
常用HTML字符实体（建议使用实体）：
字符 名称 实体名 实体数
" 双引号 " "
& &符 & &
< 左尖括号（小于号） < <
> 右尖括号（大于号） > >
空格  
中文全角空格 & 　
常用特殊字符实体（不建议使用实体）：
字符 名称 实体名 实体数
¥ 元 ¥ ¥
¦ 断竖线 ¦ ¦
© 版权 © ©
® 注册商标R ® ®
™ 商标TM ™ ™
· 间隔符 · ·
« 左双尖括号 « «
» 右双尖括号 » »
° 度 ° °
× 乘 × ×
÷ 除 ÷ ÷
‰ 千分比 ‰ ‰
NOTE：具体所需可在使用时查询，无需记忆。
视频：
video标签定义视频，如电影或其他短视频
<video src="视频地址" controls> 视频说内容 </video>
属性 值 描述
autoplay autoplay 视频就绪后马上播放
controls controls 向用户显示控件，比如播放按钮
height pixels 设置视频的高度
loop loop 档媒介文件完成播放后再次播放 (循坏播放)
muted muted 规定视频的音频输出应该被静音 （静音）
poster URL（地址） 规定视频下载时显示的图像，或者在用户点击播放时按钮前显示的图像
preload preload 视频在页面加载时进行加载，并预备播放。 如果使用"autoplay"则忽略该属性
src URL（地址） 要播放的视频地址
width pixels 设置视频的宽度
音频：
audio 标签定义声音，比如音乐
<audio src="音乐地址"> 音乐歌名 </audio>
属性 值 描述
autoplay autoplay 音频就绪后马上播放
controls controls 向用户显示控件，比如播放按钮
loop loop 当媒介文件完成播放后再次播放 (循坏播放)
muted muted 规定音频输出应该被静音 （静音）
preload preload 音频在页面加载时进行加载，并预备播放。 如果使用"autoplay"则忽略该属性
src URL（地址） 要播放的音频地址
source:当浏览器不支持某个音频或者视频时，我们给予多个选择
<source>标签为媒介元素（ 比如<video>和<audio> ）定义媒介资源
<source>标签允许您规定可替代的视频/音频文件供浏览器根据它对媒介类型或编解码器的支持进行选择
布局：语义化标签
<header> ... </header> 头部
<nav> ... </nav> 导航
<section> ... </section> 定义文档中的节。比如章节、页眉、脚本、文档中其他部分
<aside> ... </aside> 侧边栏
<footer> ... </footer> 页脚
<article> ... </article> 代表一个独立的、完整的相关页内容板块，可独立页面的其他内容使用。例如一块完整的论坛帖子、一片博客文章、一个用户的评论等
html5新增标签
figure：用于对元素进行组合。多用于图片与图片描述组合
<figure>
<img src="图片地址" alt="figure标签" title="figure标签"/>
<figcaption> figure的标题 </figcaption>
</figure>
details：用于描述文档或文档的某个细节，类似于下拉列表，兼容性较差，chrome与safari支持
<details>
<summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
<div>
<p>详细内容描述</p>
</div>
</details>
当增设open属性时，描述内容默认展示
<details open>
<summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
mark：主要是用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是搜索结果中向用户高亮显示搜索关键词
<p>你是<mark> 大长腿 </mark>吗？</p>
meter：
progress
datalist
跑马灯标签（marquee）
标签名：marquee 跑马灯标签，独占一行
属性：
behavior：设置滚动方式
scroll 一直重复
slide 只播放一次
alternate 来回弹动
direction 滚动的方向
right ：向右滚动
left ：向左滚动
up ：向上滚动
down：向下滚动
scrollamount 滚动的速度 ，数字表示
