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