一 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>