1. 什么是html
hyper 超级 text 文本 markup 标记 language 语言 超文本标记语言,俗称网页
2. html 文件结构
以 *.html 或 *.htm 结尾的文本文件
- 标签一般成对出现:
<标签名> </标签名>
- 最外层的标签
<html></html>
其它标签必须在它之内 - doctype 用来说明html的版本 如:<!DOCTYPE html>
###1 .格式
<html>
<head>
<meta charset="utf-8">
<title>网页标题</titie>
</head>
<body>
要显示的内容
</body>
</html>
head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题 主要的是网页中与内容无关的部分
body标签里放的是要显示的内容部分
3. 常用标签
3.1 标题标签 <h1>...<h6> 标题从1到6,字号依次减小
3.2 段落标签(正文) <p> 可以起到内容换行的作用, 普通文本是不会自动换行的
3.3 分隔符 <hr> 不需要结束标签, 加一道横线 换行符 <br> 不需要结束标签, 起到换行的作用
3.4 标签的属性: 格式 : 属性名="属性值" 可以用来定义标签的宽、高、颜色等等
3.5 图片标签 img src 属性代表图片路径 更多注释内容 alt 是图片访问不到时的提示文字 width 表示宽度(单位是像素) height 表示高度(单位是像素)
3.6 超链接 a 【重点】 href 属性 表示跳转的目标 方式1:两个网页之间跳转:
<a rel="nofollow" href="目标网页的地址">超链接提示文字</a>
方式2:网页内跳转 (锚点)
<a rel="nofollow" href="#另一个标签的id值">超链接提示文字</a>
方式3:图片作为超链接 <a rel="nofollow" href=""> <img src="图片路径"> </a>
3.7 列表 有序列表 (order)
<ol>
<li>列表项</li>
</ol>
无序列表 (unorder)
<ul>
<li>列表项</li>
</ul>
3.8表格
<table>
<thead></thead> 头
<tbody></tbody> 体
<tfoot></tfoot> 脚
</table>
其中 thead, tbody, tfoot 里又可以分为行与列
<tr>
表示行 '<td>' 表示列
例:
<table border="1" width="100%">
<!--标题-->
<thead>
<tr>
<td>编号</td><td>姓名</td>
</tr>
</thead>
<!--内容-->
<tbody>
<tr>
<td>1</td><td>张三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
</tbody>
</table>
与<td>
类似的'<th>',他们都是代表一列,但'<th>'其中的文本默认是居中并加粗
简写 table[border=1] [width=100%]>tbody>tr2>td2
同时生成thead和tbody 需要用() 把他们分组,平级的用+连在一起 table>(thead>tr>td3)+(tbody>tr4>td*3)
<td colspan="2">行1列1</td> conlspan用来合并行 2:代表合并2行
<td rowspan="2">行1列1</td> rowspan用来合并列
表单标签
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio" name="" checked> 单选, name取值相同的为一组 checked表示默认值为
<input type="checkbox" name="" checked> 复选, name取值相同的为一组
<input type="button" value="文字"> <button type="button">文字</button> 普通按钮
<input type="reset" value="文字"> <button type="reset">文字</button> 重置按钮
<input type="submit" value="文字"> <button type="submit">文字</button> 提交按钮
<select> 下拉列表
<option>值1</option>
<option selected>值2</option>
...
如果希望某个option默认被选中,在option上添加属性selected
<option>值n</option>
</select>
<textarea> 文本域
所有标签 都有 name="" 带有name的表单在提交时才会把表单值发送给服务器 都有 value="" 都有 readonly 只读 可以提交给服务器 都有 disabled 禁用 不会提交给服务器 required 是否必填,如果空值,不允许提交表单
<form action="服务器地址">
</form>
4. 行内样式
<标签 style="多个样式"></标签>
4.1 颜色控制
color:颜色值 颜色值可以是英文单词:red,blue,green,yellow, black, white 也可以是红绿蓝三原色: rgb(255,0,0) 还可以是16进制的值来表示: #FF0000
background-color: 背景色
4.2 字体相关的样式
font-size 像素 n px; 字体本身大小 n em; font-family 字体名称:如宋体,隶书 ... font-style: italic; 斜体 font-weight: bold; 粗体 文字修饰 text-decoration: 值(line-through 贯穿线, underline 下划线)
4.3 对齐方式
text-align: center 居中, left 左对齐, right 右对齐
4.4 背景相关
background-image: url(背景图片路径) background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复) background-size: 110px 缩放背景图大小
4.5 div 标签
容器标签,可以容纳其它标签 <div> <p> <table> ... </div> 作用:1)页面布局, 2) 统一处理
4.6 宽高
width: 宽度 height: 高度 单位可以以像素为单位 n px, 还可以是百分比 n %(以父元素为基准)
4.7 边框
border-color: 颜色 border-style: 样式(实线等) border-width: 宽度 可以把它们合并为一个 border: blue solid 100%; border-top 上边框 border-right 右边框 border-bottom 下边框 border-left 左边框 style="border-collapse: collapse" 去掉多余的空隙
1. 内间距
标签和内容之间的间隙,称为内间距 padding 可以同时控制4个方向上的内间距 padding : 10px 10px 10px 10px; 上 右 下 左
padding : 20px 5px; 上下 左右
padding : 10px 上下左右
padding-top padding-right padding-bottom padding-left
2. 外间距
同级标签之间的间隙,称为外间距
margin: 10px 10px 10px 10px;
上 右 下 左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left
<body style="margin:0">去掉和网页间的间隙
3. 盒子模型
外间距 --》 边框 --》 内间距 --》内容
4. z-index
代表该元素在z轴的位置,数字越大越向外, 要配合绝对定位使用 position:absolute; left:x坐标(向右); top:y坐标(向下) 绝对定位
rgba(红, 绿, 蓝, 透明度) 0~1 0 表示完全透明, 1 表示不透明
5. 样式表
重用样式 格式:
<html>
<head>
<style>
样式表
</style>
</head>
</html>
选择器 { 样式 } 首先使用选择器去匹配标签,匹配到的标签就会应用{}之中的样式
5.1 元素选择器
根据标签的名称进行匹配 例如div 是匹配页面中所有的div标签,p匹配页面中所有的p标签 ...
5.2 class 选择器
根据标签的 class 属性的值进行匹配
<p class="值">
<td class="">
<input class="">
.class值 { 样式 }
5.3 id选择器
根据标签的id属性值进行匹配
<p id="值">
<td id="值">
<input id="值"> id的取值要唯一
#id值 {样式 }
5.4 父子选择器
父选择器>子选择器 最终选中的是子选择器匹配的标签,但必须满足条件:父标签要和父选择器匹配
5.5 后代选择器
祖先选择器 后代选择器
5.6 伪类选择器
:hover 当鼠标悬浮在标签之上,算匹配 :nth-child 当作为第n个孩子元素, n从1开始 :last-child 当作为最后一个孩子元素
5.7 选择器的优先级
- 当多个选择器都匹配到同一个标签时,会产生优先级问题:
!important > style行内样式 > #id > .class > 元素
!important 用来提升某个样式的优先级, 写法:
样式 !important
-
子标签可以从父标签继承某个样式, 例如color 子标签自己定义了同名样式,那么它会覆盖父标签的样式
-
同优先级别的选择器,后定义的会覆盖前面定义的
6. 在网页之间重用样式
需要用到外部样式表, 可以把选择器,样式的定义放在一个 *.css 的文件当中(样式表文件) 引入外部的样式表:
<link rel="stylesheet" href="路径/css文件名">
好处:可以更大程度地在多个网页间重用样式, 让网站的风格统一
内部样式表可以实现本网页特殊的样式,采用覆盖的方法,可以覆盖掉外部样式表的样式