饥人谷学习第3天
HTML
超文本标记语言，是一个可以用来结构化Web内容并给予其含义和目标的编码语言。
概览
-
DOCTYPE
文档声明
<! DOCTYPE html>
1.DOCTYPE之前，只能由注释和空白
2.大小写不敏感 -
标签
自闭合标签/空元素
能闭合标签 -
属性
全局属性 -
注释
-
空格空白
1.使用HTML实体，如： 
2.使用 pre标签包起来（显示的就是原来的内容）
3.在父元素使用CSS while-space:pre -
实体
1.有名字的HTML实体，用 &名字; 表示
2.没有名字的HTML实体，用 &#十进制; 或 &#x十六进制; 表示
Emmet语法
- 后代：>
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
- 兄弟：+
div+p
<div></div>
<p></p>
- 上级：^
div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
- 分组：()
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
- 乘法：*
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 自增符号：
3 ($@35 可以从3~5)
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
ul>li.item$@-*3
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
-
ID和类属性
1.#header
<div id="header"></div>
2..title
<div class="title"></div>
3.form#serch.wide
<form id="search" class="wide"></form>
4.p.class1.class2.class3
<p class="class1 class2 class3"></p> -
自定义属性
p[title="hello world"]
<p title="hello world"></p> -
文本：{}
a{Click me}
<a href="">Click me</a>
标签(描述文本)
-
标题和段落
标题：h1~h6
段落：p -
列表
无序列表：ul > li(ul里面的子元素只能有li)
有序列表：ol > li
自定义列表：dl dt dd -
强调
语气重：em
直白加粗：strong
加个标记：span (比strong语义弱很多)
HTML须知
设定文档语言
<html lang="zh-CN">
- SEO(搜索引擎优化)
- 有助于视觉障碍人士通过读屏器阅读页面
- 可以设定部分页面内容的语言
<p>日语<span lang="jp"> @#$... </span> 的意思是什么？</p>
块级元素和内联元素
- 块级元素在页面中以块的形式展现 - 块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中，如
<div> <h1> <p>。 - 内联元素通常出现在块级元素中并被其他文本所包围 - 内联元素不会导致文本换行，如：
<a> <em> <strong>
属性
- 布尔属性
比如<input>被添加disabled属性（不需要赋值）后，就接受不到用户的输入了。 - 全局属性
id，class，style，title都是全局属性，可以被任何HTML元素使用；
hidden 可用于隐藏某个页面元素；
contenteditable可以使元素内容变成可编辑。
特殊字符
< --> <> --> >" --> "' --> '& --> &
注释
- < ! -- 要注释的内容 -- > （中间间距加大是为了看到此行代码）
- 快捷键 ctrl+/
HTML头部
HTML头部
-
<head>的内容不会在浏览器显示，它的作用是包含一些页面的元数据 - 元数据(Metadata):描述数据的数据(a set of data that describes and gives information about other data)
乱码：当编辑器里的文件保存后，用浏览器去解析，如果浏览器解析的编码方式和编辑器解析的方式不一样，就会出现乱码
元数据
1.指定文档编码
meta charset="utf-8"
2.适配移动页面
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.定制页面图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4.设置referer
<meta name="referer" content="never">
5.添加页面描述
<meta name="description" content="描述">
应用CSS和JS
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
创建超链接
-
简单链接
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a> -
title属性
<a href="http://www.baidu.com" title="百度搜索引擎">百度</a>
<a href="http://www.baidu.com" title="百度搜索引擎">百度</a> -
外部链接
将target设置成_blank时，点击链接浏览器会新开一个Tab打开该网页 -
返回顶部链接
<a href="#">返回页面顶部</a> -
文档内部链接
用于定位到文档的某一部分，<a>的href要对应文档内某个元素的id（值在文档内要唯一） -
图片链接
用a标签包裹图片，点击图片跳转 -
下载链接
<a href="#" download>下载... -
电话链接
<a href="tel:7883249">7883249</a> -
Email链接
<ahref="mailto:chenjunf@163.com">发邮件给chenjunf</a>
文件路径
相对路径
同一站点尽量使用相对路径
绝对路径
全路径
标签详细
1.<p>段落标签</p> 当作段落处理，段落之间有空隙
2.  ：空格标签
>大于号： (>) <小于号： (<) &与号： (&)
3.<h#>标题标签</h#> : #为1~6
4.<！--要注释的内容-->：注释符
5.图片标签<img src = " 图片路径 "/> 可以给各个属性赋值
- src：图片的路径
- height：图片的高度 px
- width：图片的宽度 px
- alt：当图片由于某些原因显示失败时所显示的文本
- title：当光标移动到图片上的时候显示的文本
可以用
<figure></figure>描述一段带图片的区域
6.<hr/> 水平线
7.<br/> 拆行换行 行与行之间没有空隙
8.字体标签 <font></font>
属性 size = 1~7最大 color = 颜色 face：字体系列
9.编辑文本
-
<b>定义粗体文本 -
<i>定义斜体 -
<tt>定义打印机文本（等宽） -
<u>定义下划线文本 -
<sup> 、<sub>定义上下标 -
<s>定义加删除线文本
10.marquee标签 用来显示元素的移动
- direction 属性，设置方向 up down left right
- behavior 属性，设置模式 scroll altermate slide
11.a标签 超链接
- 属性 href 表示要连接的地址
Target 打开新网页的方式 _blank 表示打开一个新网站进行跳转 _self 表示在当前页面进行跳转 - 实现当前页面跳转 和 实现页面间的跳转
12.body当中的属性
- text属性
文本颜色 - link属性
超链接的颜色 - alink属性
点击超链接时的颜色 - vlink属性
点击之后超链接的颜色 - bgcolor属性
设置整个背景的颜色 - background属性
背景图片，平铺
13.列表
- 无序列表unorder（圆点）
<ul> - 有序列表order（数字）
<ol> - 自定义列表
<dt>
14.表格<table>
属性cellspacing 设置单元格之间的距离 cellpadding 设置单元格与文字的距离
-
<thead>表头 -
<th>head里面的单元格(列) -
<tbody>表内容 -
<tr>行 -
<td>body行里面的单元格(列)
1.跨列的单元格 colspan属性
2.跨行的单元格 rowspan属性
3.设置合并边框模型 border-collapse 属性
4.设置相邻单元格的边框间的距离
border-spacing 属性（仅用于“边框分离”模式）
15.div+span
16.框架标签
<frameset>
<frame />
</frameset>
17.视频音频
<video>
支持多种格式
- WebM - Chrome HE Firefox
- MP4 - IE he Safari
- Ogg
<audio>
网友评论