Day1
Html
1.html的简介
(1) HyperText Mark-up Language的缩写, 超文本标记型语言，网页的语言。
a) HyperText 超文本: 超出文本的范畴
b) Mark-up标记：理解为标签，html中所有的操作都是通过标签来实现的
(2) html程序遵循规范
a) html程序<html>开始，</html>结束
b) html程序包含两部分内容：head和body
i. <head>设置页面信息</head>
ii. <body>显示到页面上的内容</body>
c) html的标签有开始标签，同时也要结束标签
d) html的代码不区分大小写的
e) 有些标签没有结束标签，需要在标签内结束 <br/><hr/>
(3) html的操作思想
通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
2.字体标签
(1) 文字标签<fount>
(2) 标题标签<h1></h1>
(3) 水平线标签<hr/>
(4) 注释标签<!-- 注释的内容 -->
(5) 特殊字符 (空格)
3.列表标签
(1) 普通标签
dl></dl>:定义列表的范围
<dt></dt>:定义上层内容
<dd></dd>: 定义下层内容
(2) 有序列表标签
使用 <ol></ol>: 定义有序列表的范围
ol标签上面有属性 type：排序的方式值1 a i
之后在ol标签里面：<li></li>: 封装具体的内容
(3) 无序列表标签
标签 <ul></ul>: 定义无序列表的范围
ul标签上面有属性 type：设置特殊符号值disc circle square
之后在ul标签里面： <li></li>: 封装具体的内容
4. 图形标签
(1) 标签：<img src="图片的路径名称"/>
(2) 属性： src：图片的路径名称
width：图片宽度
height：图片的高度
border：图片的边框的粗细
alt:显示在图片上面的内容
5. 超链接标签
(1) 标签：<a href="链接到的地址">显示在页面上的内容</a>
(2) 属性: href：链接到地址 (想要一个超链接没有效果，在href属性值写成#)
target：超链接的打开方式值：_self,当前页面打开； _blank,在新标签页打开
6. 表格标签
(1) 表格对数据进行格式化，使数据显示更加清晰，结构分明
| 标签 | <table></table> 定义表格的范围 | <tr></tr> table标签里面表示行 | <td></td> <th></th>(居中和加粗) tr标签里面表示列 |
|
属性 | border：设置表格线 bordercolor：设置表格线的颜色 cellspacing: 设置单元格之间的距离 cellpadding: 设置文字和单元格之间的距离 width: 设置表格的宽度 height：设置表格的高度 | align：设置对齐方式，值 left center right | align：设置某个单元格对齐方式 |
(2) 合并单元格
td标签上面操作
a) rowspan：跨行
b) colspan：跨列
(4) 标题标签：<caption>标题内容</caption>
(5) 如果单元格里面没有内容，使用占位符替代（使用空格 ）
7. 表单标签
(1) 把输入的数据提交到服务器上（存到服务器），这个过程称为表单
(2) 如果写表单，首先定义表单的范围<form></form>
属性:
action：提交的服务器的地址
method：表单的提交方式（有很多种，常见的有两种 get和post）
(4) 输入项：可以输入内容或者选择内容的地方
a) 输入项里面必须要有name属性
b) 在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值
c) <input type="输入项的类型"/>
| 输入项的类型 | 普通输入项 | 密码输入项 | 单选输入项 | 复选输入项 | 文件输入项 | 隐藏项 | 普通按钮 |
| 代码 | text | password | radio | checkbox | file | hidden | button |
| 属性 |
|
| 必须有name属性，同时name的属性值必须要相同 默认选中，使用checked="checked" | 必须有name属性，同时name的属性值必须要相同 默认选中，使用 checked="checked" |
|
|
|
可以写value属性，设置输入项的默认值
(5) 下拉选择输入项
<select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
selected="selected"默认选中
(6) 文本域
<textarea cols="10"rows="5"></textarea>
(7) 提交按钮和其他的按钮
提交按钮： <input type="submit"/>
属性 value：设置提交按钮显示的内容
重置按钮：<input type="reset"/>
属性 value：设置重置按钮显示的内容
回到初始状态
使用图片提交：<input type="image" src="图片路径"/>
8. 其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行
span：在一行进行显示
css
(1) css的简介
层叠样式表
css目的是：把网页的内容和样式进行分离，利用代码的维护。
使用css，不能单独使用，要和html结合使用
(2) css和html的结合方式
| 结合方式 | 使用html标签里面的属性 style="css的代码" | 使用html的标签 | 使用html标签实现 link，写在head里面 | 使用html的style标签，在标签里面使用语句样式操作 |
| 代码 | <div style=" "> | <style type="text/css"> css的代码; </style> | <link rel="stylesheet" type="text/css" href="1.css"/> | <style type="text/css"> @import url(1.css); </style> |
| 实现方式 |
|
| 首先创建css文件，在css文件里面写css代码 在html中使用link标签引入css文件 | 首先创建css文件，在css文件里面写css代码 写style标签，在标签里面 @import url(css路径); |
(3) css的选择器
a) css优先级: 后加载的优先级高
b) 格式规范： 属性名称1:属性值1;属性名称2:属性值2;
c) 选择器：作用在哪个标签上
| 选择器 | 标签选择器 | class选择器 | id选择器 |
| 原理 | 使用标签名称作为选择器 | 每个html标签上面都有一个属性class，通过设置class属性的值 | 每个html标签都有一个属性id，通过设置id的属性值 |
| 代码 | div { background-color: red; } | .haha { background-color:red; } | #hehe { background-color:green; } |
d) 选择器的优先级
style > id选择器 > class选择器 > 标签选择器
(4) css的扩展选择器
a)关联选择器
设置嵌套标签的样式
代码
divp {
background-color:red;
}
b)组合选择器
设置不同的标签具有相同的样式
代码
div,p{
background-color:green;
}
c)伪元素选择器
比如超链接为例，
状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
