文章标题
来源：互联网 发布：tensorflow能做什么 编辑：程序博客网 时间：2024/05/19 10:10
上节课知识复习
● HTML骨架结构，抽象的：
1<!DOCTYPE …… >2<html>3 <head>4 网页的配置5 </head>6 <body>7 给用户看的8 </body>9</html>DTD：文档类型声明Doc Type Declaration。一共有7种DTD，3种HTML4.01的，3种XHTML1.0的，1种HTML5的
三个小种： strict（更为严格，不能用u、b、i标签）、transitional（不怎么严格）、frameset
XHTML总体上要比HTML严格，比如必须是小写字母标签等等。
字符集Charset， 这条meta不用背。
1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">UTF-8 ： 字符全，每一个汉字3个字节，所以文件尺寸大。
gb2312(gbk) ： 字符少，每一个汉字2个字节，所以文件尺寸小。
关键词、页面描述，这两个meta不难，尽量背诵一下：
1<meta name="Keywords" content="词,词" /><meta name="Description" content="页面描述" />title标签就是页面标题
HTML就是负责描述语义的，所以就是用标签对儿的形式来给文本增加语义。
h1~h6 标题
p 段落
p标签要注意的是，里面只能放文本、图片、表单元素（这三个东西都是流元素，CSS后面细讲）。
● img图片
完整语法，两个属性src和alt，都要知道是什么意思！
src： source资源， alt ： alternate 替代物
1<img src="路径" alt="替代文本，当图片不能显示的时候，显示这里的文字" />图片里面的路径，相对路径，从html出发，找到图片。
1 <img src="images/jiehunzhao/0.png" alt="" />2 <img src="../../0.png" alt="" />a标签，超级链接
a是英语anchor锚的意思。
a标签常用的就是三个属性：
1<a href="网址" title="悬停文本" target="_blank">超级链接文字</a>页面内的锚点，用name属性或者id属性
1 <a name="grjj"></a>2 <a id="grjj"></a>如果想跳转到某个锚点：
1<a href="#grjj"></a>Chrome浏览器，中文翻译应该是“铬”，不是“硅”。审查元素功能快捷键是F12。
前端，很多东西都是自己审出来的，前端高手，都是开着审查元素上网的。
二、列表
列表有3种
2.1 无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。
1 <ul>2 <li>北京</li>3 <li>上海</li>4 <li>广州</li>5 <li>铁岭</li>6 </ul>也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
下面的是错误的，因为必须用ul包裹：
7 <li>北京</li>8 <li>上海</li>9 <li>广州</li>10 <li>铁岭</li>下面的也是错误的，因为ul里面只能有li标签，而不能有别的：
1 <ul>2 <h3>中国主要城市</h3>3 <li>北京</li>4 <li>上海</li>5 <li>广州</li>6 <li>铁岭</li>7 </ul>
浏览器会默认的给无序列表小圆点的“先导符号”
但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
ul标签实际应用场景：
导航条：
li里面放置的内容可能很多：
ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：
1<ul>2 <li>3 <h4>习近平谈治国理政</h4>4 <p>¥49.00</p>5 <p>《习近平谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以习近平同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>6 </li>7 <li>8 <h4>习近平用典</h4>9 <p>¥23.60</p>10 <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对习近平总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>11 </li>12 <li>13 <h4>摆脱贫困</h4>14 <p>26.00</p>15 <p>追本溯源 融会贯通 深入学习贯彻习近平总书记系列重要讲话精神 推动学习贯彻向广度深度拓展 习近平总书记**部个人专著 时隔22年后重印发行</p>16 </li>17 </ul>甚至于可以再放一个ul：
1<ul>2 <li>3 吃的18 <ul>19 <li>饼干</li>20 <li>面包</li>21 <li>22 巧克力23 <ul>24 <li>德芙</li>25 <li>费列罗</li>26 </ul>27 </li>28 </ul>4 </li>5 <li>6 用的7 <ul>8 <li>笔记本</li>9 <li>圆珠笔</li>10 </ul>11 </li>12 <li>13 喝的14 <ul>15 <li>牛奶</li>16 <li>可乐</li>17 </ul>18 </li>19 </ul>2.2 有序列表
ordered list 有序列表，用ol表示
1
- 小苹果
- 月亮之上
- 最炫民族风
浏览器会自动增加阿拉伯序号：
也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul：
1<ul>2 <li>1. 小苹果</li>3 <li>2. 月亮之上</li>4 <li>3. 最炫民族风</li></ul>2.3 定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd
1 <dl>2 <dt>北京</dt>3 <dd>国家首都，政治文化中心</dd>4 <dt>上海</dt>5 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>6 <dt>广州</dt>7 <dd>中国南大门，有珠江、小蛮腰</dd>8 </dl>表达的语义是两层：
1) 是一个列表，列出了北京、上海、广州三个项目
2）每一个词儿都有自己的描述项。
dd是描述dt的。
定义列表用法非常灵活，可以一个dt配很多dd：
1 <dl>2 <dt>北京</dt>3 <dd>国家首都，政治文化中心</dd>4 <dd>污染很严重，PM2.0天天报表</dd>5 <dt>上海</dt>6 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>7 <dt>广州</dt>8 <dd>中国南大门，有珠江、小蛮腰</dd>9 </dl>北京这个项目，用了两个dd来描述。
还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。
1 <dl>2 <dt>北京</dt>3 <dd>国家首都，政治文化中心</dd>4 <dd>污染很严重，PM2.0天天报表</dd>5 </dl>67 <dl>8 <dt>上海</dt>9 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>10 </dl>1112 <dl>13 <dt>广州</dt>14 <dd>中国南大门，有珠江、小蛮腰</dd>15 </dl>真实案例：
京东最下方：
结构：
1<dl>2 <dt>购物指南</dt>3 <dd>4 <a href="#">购物流程</a>5 <a href="#">会员介绍</a>6 <a href="#">生活旅行/团购</a>7 <a href="#">常见问题</a>8 <a href="#">大家电</a>9 <a href="#">联系客服</a>10 </dd>11</dl>12<dl>13 <dt>配送方式</dt>14 <dd>15 <a href="#">上门自提</a>16 <a href="#">211限时达</a>17 <a href="#">配送服务查询</a>18 <a href="#">配送费收取标准</a>19 <a href="#">海外配送</a>20 </dd>21</dl>
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义。
三、div和span
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
CSS中你将知道，这两个东西，都是最最重要的“盒子”。
1 <div>2 <h3>中国主要城市</h3>3 <ul>4 <li>北京</li>5 <li>上海</li>6 <li>广州</li>7 </ul>8 </div>910 <div>11 <h3>美国主要城市</h3>12 <ul>13 <li>纽约</li>14 <li>洛杉矶</li>15 <li>华盛顿</li>16 <li>西雅图</li>17 </ul>18 </div>div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：
1 <p>2 简介简介简介简介简介简介简介简介3 <span>4 <a href="">详细信息</a>5 <a href="">购买</a>6 </span>7 </p>所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
四、表单
表单就是收集用户信息的，就是让用户填写的、选择的。
1 <div>2 <h3>欢迎注册本网站</h3>3 <form>4 所有的表单内容，都要写在form标签里面5 </form>6 </div>form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
4.1 文本框
1<input type="text" />input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。
这是一个自封闭标签，自此，我们学习的自封闭标签有：
1<meta name=”Keywords” content=”” />2<img src=”” alt=”” />3<input type=”text” />value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
4.2 密码框
1<input type="password" />也就是说，input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框
4.3 单选按钮
1<input type="radio" name="xingbie" /> 男2<input type="radio" name="xingbie" /> 女只能选一个，术语叫做“互斥”。
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
1<input type="radio" name="xingbie" /> 男2<input type="radio" name="xingbie" /> 女默认被选择，就应该书写checked=”checked”
1<input type="radio" name="sex" checked="checked">4.4 复选框
1<p>2 请选择你的爱好：3 <input type="checkbox" name="aihao"/> 睡觉4 <input type="checkbox" name="aihao"/> 吃饭5 <input type="checkbox" name="aihao"/> 足球6 <input type="checkbox" name="aihao"/> 篮球7 <input type="checkbox" name="aihao"/> 乒乓球8 <input type="checkbox" name="aihao"/> 打豆豆9</p>复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）
HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）。
不过现在，我们就先学习这四个。
1<input type="text" /> 文本框2<input type="password" /> 密码框1<input type="radio"> 单选按钮2<input type="checkbox" /> 复选框4.5 下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
1<select>2 <option>北京</option>3 <option>河北</option>4 <option>河南</option>5 <option>山东</option>6 <option>山西</option>7 <option>湖北</option>8 <option>安徽</option>9</select>4.6 多行文本框（文本域）
text就是“文本”，area就是“区域”。
1<textarea cols="30" rows="10"></textarea>这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。
4.7 三种按钮
按钮也是input标签，一共有三种按钮：
普通按钮：
1<input type="button" value="我是一个普通按钮" />button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。 
提交按钮：
1<input type="submit" />submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事
重置按钮：
1<input type="reset" />reset就是“复位”的意思。
至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：
1text
2password
3radio
4checkbox
5button
6submit
7reset
4.8 label标签
本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
1<input type="radio" name="sex" /> 男2<input type="radio" name="sex" /> 女label就是解决这个问题的。
1<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>2<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。
复选框也有label：
1<input type="checkbox" id="kk" />2<label for="kk">10天内免登陆</label> 什么表单元素都有label。
五、HTML杂项
5.1 HTML注释
任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。
1 <!--这里是头部，还没有做完，准备加两天班弄完-->2 <div>头部</div>3 <!--这里是陈伟弄的，跟我没关系-->4 <div>主要内容</div>5 <!--这里是高俊负责的-->6 <div>页尾</div>HTML注释的语法
1
Sublime中按ctrl+/ 就是注释
5.2 字符实体
我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
1好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。
所以，如下
< h1>
1<
就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；
1>就是>的字符实体。
gt就是greater than 大于的意思。
1©就是© 版权符号。
1
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。
所以：
1哈 哈
空出了4个字的格，可以防止空白折叠现象。
5.3 HTML废弃标签介绍
HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
这些样式的标签，都已经被废弃。
2004年之前的东西了：
1<font size="9" color="red">哈哈</font>这些标签都是css钩子，而不是原意：
1 <b>加粗</b>2 <u>下划线</u>3 <i>倾斜</i>4 <del>删除线</del>5 <em>强调</em>6 <strong>强调</strong>这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
水平线：
1<hr />换行：
1<br />不另起一个段落，进行换行。
1 <p>2 哈<br />哈哈3 </p>网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用
br是英语break打断的意思。
标准的div+css页面，用的标签种类很少：
1div p h1 span a img ul ol dl input
知道每个标签的特殊用法、属性。比如a标签，img的属性。
HTML结构、字符集。
网络的基础知识。
六、CSS
现在的互联网前端三层：
HTML 超文本标记语言 从语义的角度描述页面结构。
CSS 层叠式样式表 从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。
6.1 CSS整体感知
css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。
css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。
1 <style type="text/css">2 p{3 color:red;4 font-size: 30px;5 text-decoration: underline;6 font-weight: bold;7 text-align: center;8 font-style: italic;9 }10 h1{11 color:blue;12 font-size: 50px;13 font-weight: bold;14 background-color: pink;15 }16 </style>我们写css的地方是style标签，就是“样式”的意思，写在head里面。
后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面
1<style type=”text/css”>2</style>type表示“类型” ， text就是“纯文本”。css也是纯文本的。
sublime这里如果想自动生成，那么要输入： 
6.2 一些常见的属性
字符颜色：
1color:red;
color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。
sublime中的快捷键是c，然后tab
字号大小：
1font-size:40px;
font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。
sublime中的快捷键是fos，然后tab
背景颜色：
1background-color: blue;
background就是“背景”。
sublime中的快捷键是bgc，然后tab
加粗：
1font-weight: bold;
font是“字体” weight是“重量”的意思，bold粗。
sublime中的快捷键是fwb，然后tab
不加粗：
1font-weight: normal;
normal就是正常的意思
sublime中的快捷键是fwn，然后tab
斜体：
1font-style: italic;
italic就是“斜体”
sublime中的快捷键是fsi，然后tab
不斜体：
1font-style: normal;
sublime中的快捷键是fsn，然后tab
下划线：
1text-decoration: underline;
decoration就是“装饰”的意思。
sublime中的快捷键是tdu，然后tab
没有下划线：
1text-decoration:none;
sublime中的快捷键是tdn，然后tab
七、基础选择器
1） 选择器，怎么选；
2） 属性，样式是什么
7.1 标签选择器
所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input
1 ul{2 background-color: yellow;3 }2） 无论这个标签藏的多深，一定能够被选择上：1 <ul>2 <li>3 <ul>4 <li>5 <ul>6 <li>7 <ul>8 <li>9 <p>我是很深的p</p>10 </li>11 </ul>12 </li>13 </ul>14 </li>15 </ul>16 </li>17 </ul>css：1 p{2 color:blue;3 }能够让很深的p变蓝。
3） 选择的所有，而不是一个。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。
7.2 id选择器
1 <p>我是段落1</p>2 <p id="para2">我是段落2</p>3 <p>我是段落3</p>css：1 <style type="text/css">2 #para2{3 color:red;4 }5 </style>id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。
这个标签的名字，可以任取，但是：
1） 只能有字母、数字、下划线
2） 必须以字母开头
3） 不能和标签同名。比如id不能叫做body、img、a
一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义
- 文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题 文章标题 文章标题 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- 文章标题
- Web开发-缓存穿透 缓存并发 缓存雪崩等一系列开发常见的缓存常识
- import 导入其他路径的模块
- Linux inotify功能及实现原理
- 访问者模式（Visitor）
- 数据结构算法设计
- 文章标题
- 向量点积、叉积的意义
- android 录制视频转gif
- 爬虫中 header 中常见的 user agent
- cyk追楠神系列一
- 海明码2
- Linux下取代top的进程管理工具 htop
- hadoop组件概况
- Codeforces 741C 图论
