html和css的较量
web结构的组成
-
html：超文本标记语言
-
css： 层叠样式表 美化页面
-
javascript：轻量级的脚本编程语言（行为和动态）
html标签规则
-
关键字由 尖括号包裹
-
成对出现，由开始标签和结束标签组成（结束标签多一个反斜杠/）
例：
<img src="图片路径"/> <input type="text" />基本上都是双标签，但是还有一类比较特殊，叫“单标签”、“自闭和标签”、“空标签”
快速生成一个html
-
新建一个xx.html的文件
-
输入法 调到英文状态下
-
在编辑区输入感叹号 ！+enter
html的基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content="关键字"> <meta name="description" content="描述"> <title>网页名称</title> </head> <body> 展示内容 </body> </html>标签的关系
-
包含
-
并列
标签
标题标签
标题标签可以分为六级，从h1-h6，从表象上看：粗细相同，都是加粗的，字号逐次递减；从优化程度上来说，重要程度也是逐次递减，h1一般用在logo的部分
<!--快捷生成 h$*6{标题$} --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>段落
<p>段落</p>图片
-
src：图片地址
-
alt：图片加载失败 出现代替文字
-
title：鼠标滑上，会出现跟随文字
超链接 a
-
target：
-
_self ：当前窗口打开
-
_blank：在新窗口打开
-
属性
描述一定的特征和功能的就是属性，属性可以分为内置属性和自定义属性，
-
一个标签的属性是可以有多个的
-
属性与属性之间需要有 空格
-
没有顺序关系
a标签里面的值
-
普通的网址
-
可以回到顶部 href=“#”
-
刷新 href=“ ”；
-
href=”javascript:;“禁止跳转
-
锚点跳转
点击某个链接文字，想跳转到对应的模块，可以给每个模块设置一个id名字，让相应的a标签的href值等于这个id的名字（别忘了加#）
字符实体
字符实体有字符编号和字符名称
新增的标签
1）iframe
内嵌网页
<iframe src="李敬轩.html" frameborder="1" width="500" height="600"></iframe>2）div
大盒子标签，用来划分区域（块级元素）
3）spam
小盒子标签，用来划分小区域（行内元素）
4）格式化标签
标签自带一定的样式
-
斜体： i、em
-
加粗 ：b、strong
-
删除线：s、del
-
下划线：ins 、u
i/em都表示斜体，b、strong表象上都是加粗，从优化程度上，em和strong(语义化更强烈一些)要比i、b更重要
5)预格式化标签 pre
会安装编辑区里面预先设置好的格式显示在页面上
<h3>预格式化标签</h3> <pre> *** *** （） （） *** </pre>音频 audio/视频video
+ src 资源路径 + controls控制器 + loop 循环播放 + autoplay 自动播放 <audio src="qt.mp3" controls loop autoplay></audio> <video src="212.mp4" controls loop autoplay></video>三大列表
注意：三大列表都是固定样式，ul 和ol里面紧邻着一定式li，如果需要其他标签，可以放到li里面。dl里面紧邻着一定式dt和dd，如果需要其他标签，可以放到dt dd里面
无序列表
ul li 都是固定样式
<!--无序列表 --> <ul> <li><a href="http://www.baidu.com"> 最新动态：come on baby</a></li> <li>最新动态：come on baby</li> <li>最新动态：come on baby</li> <li>最新动态：come on baby</li> </ul>