前端小白的学习之路html与css的较量【一】-前端开发

html和css的较量web结构的组成html标签规则快速生成一个htmlhtml的基本结构标签的关系标签标题标签段落图片超链接 a属性a标签里面的值字符实体新增的标签1）iframe2）div3）spam4）格式化标签5)预格式...

html和css的较量

- web结构的组成
- html标签规则
- 快速生成一个html
- html的基本结构
- 标签的关系
- 标签
  - 标题标签
  - 段落
  - 图片
  - 超链接 a
- 属性
- a标签里面的值
- 字符实体
- 新增的标签
  - 1）iframe
  - 2）div
  - 3）spam
  - 4）格式化标签
  - 5)预格式化标签 pre
  - 音频 audio/视频video
- 三大列表
  - 无序列表
  - 有序列表
  - 无序列表

web结构的组成

html：超文本标记语言
css：层叠样式表美化页面
javascript：轻量级的脚本编程语言（行为和动态）

html标签规则

关键字由尖括号包裹
成对出现，由开始标签和结束标签组成（结束标签多一个反斜杠/）
例：

基本上都是双标签，但是还有一类比较特殊，叫“单标签”、“自闭和标签”、“空标签”

快速生成一个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>

标签的关系

包含
并列

属性

描述一定的特征和功能的就是属性，属性可以分为内置属性和自定义属性，

一个标签的属性是可以有多个的
属性与属性之间需要有空格

没有顺序关系

<img src="" alt="小破孩" title="名称" index="2>
a标签里面的值

普通的网址

可以回到顶部 href=“#”

刷新 href=“ ”；

href=”javascript:;“禁止跳转

锚点跳转
点击某个链接文字，想跳转到对应的模块，可以给每个模块设置一个id名字，让相应的a标签的href值等于这个id的名字（别忘了加#）

<a href="#"> 回到顶部</a> <a href="">重新加载</a> <a href="#id">回到目的id位置</a> <a href="javascript:;">禁止跳转</a>
字符实体

字符实体有字符编号和字符名称

新增的标签

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>
有序列表
 <ol> <li><span>1</span> 最新动态：come on baby</li> <li><span>2</span> 最新动态：come on baby</li> </ol>
无序列表
<dl> <dt>关于我们</dt> <dd><a href="">官网</a> </dd> <dd><a href="">备站</a></dd> <dd><a href="">联系我们</a></dd> <dd><a href="">客服答疑</a></dd> <dd><a href="">故事</a></dd> </dl>