HTML个人笔记之一
html 基础知识
html 超文本标记语言(HyperText Markup Language)
1）文本： 中英文
超文本：音频 视频 图片等非文字元素
2）浏览器解析html文件的顺序
从上往下，并且页面中元素的位置与该元素在HTML文件中的位置保持一 致
3）html出现语法错误时，浏览器或者编辑器不会报错
4）html文件可以使用 .html或.htm作为文件名后缀
前期准备
1）B/S架构
Browser/Server，浏览器/服务器模式
2）HTTP{超文本传输模式}
请求响应模式
请求
请求头-浏览器缓存机制（disk cache）、设置 token【令牌】 登陆
请求行-请求方式【post、get】。请求地址
请求体-携带给服务器的数据
响应
响应头-暂无
响应行-状态码 200 401 404……
响应体-服务器返回给浏览器的数据/结果
浏览器
HTTP
服务器
3）URL【统一资源定位符】
同源策略
协议+ 域名/IP + 端口号
http://47.93.255.92:8080
https://baidu.com:80
https://baidu.com:8099
跨域拦截
不安全
1.协议相同，端口相同，但域名不同
https://baidu.com:80
https://baidu2.com:80
2、协议相同，其他相同
http://baidu.com:80
https://baidu.com:80
3、端口号不同，其他相同
https://baidu.com:8099
https://baidu.com:80
html语法
1)HTML结构
<!-- 指定浏览器以哪一个版本解析html文件 -->
<!DOCTYPE html>
<!-- HTML 页面的根结点，用来包含HTML文档的所有元素 -->
<html lang="en">
<!-- 包含在头部的内容不会被显示在页面中，
这里通常包含页面的编码，作者，页面的描述信息，JavaScript的导入，CSS的导入等信息。 -->
<head>
<!-- 用来声明当前文档的编码方式为utf-8 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 支持SEO的检索 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 当前文件在浏览器打开时的选项卡的标题 -->
<title>第一个页面</title>
</head>
<!-- 所有想要显示在浏览器中的元素都被包含在该元素中。 -->
<body>
<!-- 页面内容，浏览器视口中的内容 -->
建立第一个页面
</body>
</html>
2)属性
使用在开始标签内部
核心属性
大多数元素都可以使用的属性
id 唯一标识
class 标识一类元素
style 样式
title 描述信息 光标悬浮显示信息
3）元素
一个HTML元素是由一个开始标签，一个结束标签，以及内容。结束标签与开始标签类似，不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。如下，标签内的问题以段落形式进行显示。
1.块级元素
1）独占一行空间，默认宽度占满当前屏幕/父元素。
2）可以设置宽高
3）可以嵌套其他标签【块级、行内】
div p h1-h6 form ul li ol ...
2.行内元素
span a i b ...
1）可以与其他元素共享一行空间
2）不可以设置宽高
3）不可以嵌套其他块级元素
3.空元素
只包含单个标签，通常用于在文档中插入部分内容。例如img
4.替代元素（ replaced element ）
替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有
<img>，<object>，<video>，<textarea>，<input>，<audio>，<canvas>等。
注意：这些特点都是当前元素默认的，也就是说后期可以通过css将元素设置为其他分类
4）主要语法
1.空白
在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白。
2.实体
在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体。
3.注释
注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义，方便以后再看的时候能看明白。
<!-- 这是一段注释 -->
5）标签
段落 （存在上下外边距，没有内边距）
<p>I am a paragraph, oh yes I am.</p>
标题
<h1>标题一 存在上下外边距，没有内边距</h1>
<h2>标题二 存在上下外边距，没有内边距</h2>
<h3>标题三 存在上下外边距，没有内边距</h3>
<h4>标题四 存在上下外边距，没有内边距</h4>
<h5>五级标题 存在上下外边距，没有内边距</h5>
<h6>六级标题 存在上下外边距，没有内边距</h6>
其他文本类型标签
<strong> 意为强调，内容更为有用
<b> 加粗
<em> 意为强调，突出文章重点，倾斜效果
<i> 斜体
<u> 下划线
<sup> 上标
<sub> 下标
列表
- 有序列表ol
子元素 li，序号默认从1 开始
start属性规定有序列表的起始值。 reversed属性规定列表顺序为降序。
type属性规定在列表中使用的标记类型，取值disc、square、circle等。不推荐使用该属性，之后用css样式实现。 - 无序列表ul （ul存在上下外边距，左内边距）
子元素 li
type属性规定在列表中使用的标记类型，取值disc、square、circle等。不推荐使用该属性，之后用css样式实现。 - 列表dl
子元素 dt：标题
子元素dd：列表项
超链接
超链接可以允许我们从当前文档链接到任意其他文档（其他资源），也可以链接到文档的某个特定部分。
<a href="http://www.baidu.com" target="_blank">百度一下</a>
href 表示跳转的目的地，取值如下：
-
目标元素的ID值 用于锚点跳转 href="#目标元素的ID值"
-
URL
URL使用path来定位文件，path又分为相对路径和绝对路径
路径
相对路径 ：以./或者…/…/…/开头的路径
绝对路径 ：以/开头的路径 -
email
html <a href="mailto:liuyr@briup.com">联系我们</a>
target 规定在何处打开链接文档：
-
_self (默认，在当前选项卡打开新页面)
-
_blank(在新选项卡打开新页面)
图片
<img>在Html文档中代表图片。
<img src= "images/phone.jpg" alt= "图片找不到了…" width= "200px" >
-
src 表示图片的URL地址（必须）
-
alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
-
width 设置图片的宽度，单位为px，不推荐使用，之后用css样式实现
-
height 设置图片的高度，单位为px，不推荐使用，之后用css样式实现
表格
<table>在Html文档中代表表格，通过二维数据表表示数据。
Table标签经常需要配合caption thead tfoot tbody tr td th col colgroup一起使用 。
<table>
-
align
表格应该如何在文档中对齐，可以取值：left,center,right -
border
设定表格边框特性，取整数为值，单位为px -
cellpadding 设定内容与单元格之间的距离
-
cellspacing 设定单元格与单元格之间的距离
-
width 设定表格的宽度
-
bgcolor 设定表格的背景色
-
caption
<caption>表示表格的标题信息 -
colgroup 列分组
-
thead
<thead>表示表头，包含了<tr>以及<td> -
tbody
<tbody>表示表格的表体，包含了很多<tr> -
tfoot
<table>表示表脚，包含了对表的总结信息 -
tr
<tr>表示表格的行，可以包含<td>,<th>元素 -
td/th
-
<td>表示表格用来包含数据的单元格。常用于表头单元格，th单元格内的内容有居中加粗的效果。
属性
colspan 跨列数
rowspan 跨行数
width 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的时候会适当的调整 -
colgroup
-
<colgroup>定义一个表中的一组列，只能作为table的子元素，位于<caption>元素后，其他元素之前。 -
col
-
<col>定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为元素的子元素。 -
span
跨列数，即规定有几列可以作为同一列
HTML5新特性 新增标签
header
<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
nav
<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
article
<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。
section
<section>作为Html文档独立的功能。
aside
<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
footer
<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。
address
<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要：
section, article, aside, footer, header, nav, hgroup { display:block; }
但是上述方法有局限性，比如在IE8以及更早版本，是无法对未知元素进行样式的修饰，因此需要：
figure& figcaption
figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。
details
details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。
- open属性
当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素
summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
