html基本基础

一 HTML5是用来做什么的？
PSD2HTML
信息
信息差（信息不对称）

二 html文件新建流程：
新建文本文件
网页文件后缀 .html
修改编码：ANSI格式，UTF-8无BOM格式
=======================
三 HTML5
狭义：超文本标记语言（第5代）
HTML4 - XHTML - HTML5
广义：H5
结构层：HTML5
样式层：CSS3
行为层：DOM，JavaScript

=======================

四 HTML标签（元素）

语法结构：
<标签开始 属性名="属性值">标签内容</标签结束>
<标签开始 属性名="属性值">
<标签开始>

凡是成对出现的语言结构，一律先输入起始结束，再填充内容

五:常用标签(最常用的标签,基本写出网站的90%的呢内容)

1：超链接：行内
<a href="http://baidu.com/">百度</a>
<a href="http://baidu.com/" target="_blank">新窗口打开</a>
<a href="aaa">aaa文件夹</a>
<a href="bbb.html">bbb文件</a>
<a href="aaa/ccc.rar">aaa文件夹下的ccc,下载</a>
<a href="###">点击不动</a>

2：图片，行内
<img src="tu.png"> 同目录下,简写
<img src="./tu.png"> 同目录下,全称

<img src="aaa/tu.png"> ***下级目录，常用

<img src="../tu.png"> 上级目录
<img src="../aaa/tu.png"> 先上级，再下级目录

<img src="/tu.png"> 根目录

3：换行：行内
<br>

4：通用块级容器，块级
<div>通用块级容器</div>

5：通用行内容器，行内
<span>通用行内容器</span>

6：标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

7:段落
<p>段落</p>

8:无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

9：注释
<!--
这是注释
-->
注释不能嵌套

完成一个网页所需最少标签：

<a href="###">baidu</a>
<img src="a.jpg">
<div>块级容器</div>
<span>行内容器</span>

<h1>一级标题</h1>
<p>段落</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

-------------------------------------
六 HTML元素传统分类：
块级元素：div,h1,p,ul,li
一般情况：多个块级元素或块级和行内元素 并列，会自动换行
行内(内联)元素
多个行内元素，不换行
a,img,br,span

还可以分为：
语义性标签：a,img,h1,p,ul,li
非语义性标签:br,div,span

七 网页结构分析：
网页是三维结构
代码内用标签嵌套表示层级

八 HTML的语义性：
基本要求：HTML代码的基本结构要正确
高级要求：尽量使用语义性标签，找不到语义性标签再使用非语义性标签
网页使用什么标签
要看这个HTML模块到底是什么
而不是看这个模块像什么

HTML书写
理想状态：100%追求网页的语义性
现实情况：网页的语义程度受限于成本，不能追求无限的语义性
在基本语义实现的情况下，选写最少最快的那种

九 HTML语义性和效率实现均衡：
例子：网站logo
效率：
<a href="###"><img src="logo.gif"></a>
语义性：
<h1>百度</h1>
css:
h1 宽高
logo作为背景图
text-indent:-9999px 缩进

------------------------------------
十 HTML常用属性：HTML元素节点的钩子
id：id名
class：类名
相同：都用来标识元素
不同：
id名，值是唯一的
在同一个网页中，相同名字的id只能有1个
一个id名，只能有1个值
class类名，值不唯一
在同一个网页中，相同名字的class可以有多个
一个class类名，可以有多个值，空格分隔
注意：id和class命名规范：
1：不能以数字开头
2：命名尽量有语义性
3：一般来说：整体大块模块一般用id，小块用class

<div id="a1">11111111</div>
<div class="b2 cc d3">2222222</div>
<h2 class="b2">333333</h2>
----------------------------------------
十一 关于标签嵌套：
块级元素内部可以嵌套其他块级元素和行内元素
行内元素内部只能嵌套其他行内元素
特例：p标签是块级，但p标签内只能嵌套行内元素，举例

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>