html文档分析
//文档头--告诉浏览器用哪种方式编译代码
<!DOCTYPE html>
//文档体hmtl标签中包含head、body标签--lang设置语言,当前cn代表中文,en代表英文
<html lang="cn">
//head头部放置的是配置文件,后面css样式(内联、外链)也会放入head头部标签内
<head>
//charset设置编码方式
<meta charset="UTF-8">
//视口标签
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//title标签--网页标题
<title>Document</title>
</head>
//body标签内书写自己的代码,书写网页结构
<body>
</body>
</html>
html基本标签、属性
//标签属性<标签名 K='v'>,如下标签为例,img就是标签名,src、alt、title都是k,k代表属性(一个标签可以有多个属性,属性之间用空格隔开),v代表属性的值,src放置图片地址,alt在img不能正常显示图片的时候提示文字,title鼠标在标签上停留会显示对应文字
<img src='logo.png' alt='logo图片' title='页面logo'>
//常用标签
//img引入图片
<img src=''>
//放在head头部内。内属性rel定义文档与外部资源的关系,href链接外部资源位置。rel='stylesheet'为css样式,href为css格式,rel为shortcut icon时设置网页标题前的小图标,href为ico格式,一般名字为favicon.ioc,type属性为'image/x-icon'。
//css也可以在head内添加<style></style>标签,内直接书写css样式。也可以在行内直接书写,不过维护艰难、权重过高,强烈不建议使用行内css样式
//行内样式:<p style='color:#ffffff'></p>
<link rel='stylesheet' href='cssname.css'>
<link rel='' href='favicon.ico' type='image/x-icon'>
//JavaScript,一般建议放在文档底部,也可以放head内,需要设置网页加载完成后再执行,否则可能获取不到html标签。可以直接在标签内写入js代码,也可以加src属性引入外部js文件。
<script src='jsname.js'></script>
//h1-h6标题标签,一般一个网页只有能一个h1标签,h1语义非常重,一般作网页引入logo,两个h2标签,三个h3标签,其余不限。使用标签的目的不是为了程序员,而是浏览器排名,正确使用标签可以使网页排名更靠前。
<h1></h1>
//p段落标签,引入一段文字,一般不内嵌p或者其他块级标签,可以内嵌a标签或者小标签span、b、em、i、u等行内标签
<p></p>
//a超链接标签,href放置的是跳转页面或者位置的地址,target属性是_blank的时候,页面会在新标签页打开,不写或者为_self的时候在本标签页打开。a标签可内嵌任何有需要跳转功能的标签。
<a href='' target=''></a>
//ul ol列表标签,需要内嵌li标签,ul是无序列表,ol是有序列表。ul用来实现类似的布局,导航栏一般都用ul li实现。
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
//div用来实现布局
<div></div>
//小标签语义轻,用来引入小元素
<span></span>无格式
<b></b>加粗
<i></i>斜体
<em></em>强调文本,斜体
<u></u>下划线标签
<del></del>删除线,一般代表已删除文本
<ins></ins>插入下划线,一般代表新添加的文本
<sup></sup>上标
<sub></sub>下标
**常用网页框架标签**
<header>页头</header>
<nav>导航栏</nav>
<main>主体</main>
<aside>侧边栏</aside>
<article>文章</article>
<footer>页脚</footer>
标签分类
**行内标签:**
span:无格式
a:超链接,可定义锚点,定义neme后可以在另一个a的href='#+name'连接锚点
b:字体加粗
big:大号字体加粗
i:斜体
em:强调文本斜体
u:下划线
del:删除线,一般代表已删除文本
ins:插入下划线,一般代表新添加的文本
strong:语气更强的强调的内容
br:换行
cite:引用进行定义
code:定义计算机代码文本
label:备注标签
select:单选或多选下拉列表
small:小号字体效果
sup:上标
sub:下标
textarea:文本域
audio:src引入音频文件
video:src引入视频文件
iframe:src嵌入子页面,有frameborder属性
等
**行内块标签:**
img:引入图片
input:定义输入框、按钮、单选多选框等
td:在table的tr里定义列
**块级标签:**
<header>页头</header>
<nav>导航栏</nav>
<main>主体</main>
<aside>侧边栏</aside>
<article>文章</article>
<footer>页脚</footer>
section:解释文档,定义文档的某个区域,比如章节,头部,底部或文档其他区域。可以内嵌标签
-----以上标签还是html新添标签
caption:定义表格标题
dd:定义列表中定义条目
dl:定义列表
dt:定义列表中的项目
div:定义文档中的分区或节
form:创建html表单
h1:定义最大标题
h2:定义副标题
h3-h5:定义标题
h6:定义最小标题
hr:水平线
fieldset:元素可将表单内的相关元素分组
legen:为fieldset元素定义标题,必须与fieldset标签内搭配使用,不然无效果,无意义
ul:定义无序列表
ol:定义有序列表
li:定义列表项目,在ul、ol中使用
p:定义一段文字
table:定义html表格,th标签定义标题,tr定义行,td定义列
**自闭合标签**
input:定义输入框、按钮、单选多选框等
meta:提供有关页面的元信息
link:内属性rel定义文档与外部资源的关系,href链接外部资源位置
br:换行
hr:水平线
img:引入图片
标准流
一般写网页优先使用标准流,具有稳定性,然float,再position。不建议使用relative。
标准流:
行内标签
块级标签
非:
行内块
加float浮动的标签(自动变为行内块)
position中
fixed:固定位置,脱离标准流,有四个坐标
absolute:绝对位置,脱离标准流,有四个坐标(需在父元素添加相对定位)
relative:相对位置,半脱离标准流,没有四个坐标,占用本来的位置