HTML基础
- 定义
超文本标记语言 HyperText Markup Language - 基本结构
<!DOCTYPE html> <!--文档声明类型，声明帮助浏览器正确地显示网页-->
<html> <!--html文档的根标签-->
<head> <!--网页头部信息，用来做网页的基本配置-->
<meta charset="utf-8"> <!--网页字符编码-->
<title>html的基本结构</title> <!--网页在浏览器窗口中显示的标题-->
</head>
<body>此标签中写网页中显示的内容</body>
</html>
- 相对路径与绝对路径
- 相对路径
相对于引用文件本身去定位被引用的文件地址- “./” 表示当前文件所在目录下
- “…/” 表示当前文件所在目录下的上一级目录
- 绝对路径
相对于磁盘的位置去定位文件的地址
- 相对路径
- 常用字符实体
- 空格
- “<” <
- “>” >
- 标签
- 标签类型
- 单标签
<br /> - 双标签
<h1></h1>
- 单标签
- 常用标签
- 块元素标签
- 标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>- 段落标签
<p>段落1</p> <p>段落2</p>- 通用块容器标签
<div>第一个div元素</div> <div>第二个div元素</div> - 内联元素标签
- 超链接标签
<!--target常用属性：_blank：在新窗口中打开；_self：默认。在相同的框架中打开；--> <a href="http://www.baidu.com" target="_blank">内容元素</a> <a href="本地.html">本地链接</a> <!--空链接写法：1、# 2、javascript:; 3、javascript:void(0) --> <!--锚点链接：设置ID，href属性写#id名-->- 通用内联容器标签
<span>内联容器标签</span>- 图片标签
<img src="images/pic.jpg" alt="图片加载失败时的提示文字" title="光标放在图片上的提示文字"/> - 其他标签
- 换行标签 <br />
- html注释
<!-- 这是一段注释 -->
- 块元素标签
- 标签类型
- 标签语义化
在合适的地方用合适的标签；语义化做的好的，搜索引擎排名更前- 带语义的标签
- h1~h6
- p
- img
- a
- <em>标签 表示语气中的强调词
- <i>标签 表示专业词汇
- <b> 表示文档中的关键词或产品名
- <strong> 表示非常重要的内容
- …
- 不带语义的标签
- div
- span
- 带语义的标签
- HTML5新标签
这些新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在PC端网站上，因为IE低版本不识别这些新标签。- <header>头部</header>
- <nav>导航栏</nav>
- <aside>侧导航</aside>
- <article>文章块</article>
- <footer>底部</footer>
CSS基础
- 定义
Cascading Style Sheets，层叠样式表 - 用途
html只负责文档的结构和内容，表现形式完全交给CSS，使html文档变得更加简洁 - 注释
/*注释内容*/ - 基本语法
选择器 { 属性：值； 属性：值； 属性：值；} - 引入方式
- 内联式
<div style="width:100px; height:100px; background:red ">......</div>- 嵌入式
<head> <style type="text/css"> div{ width:100px; height:100px; background:red } ...... </style> </head>- 外链式
<head> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> - 常用选择器
- 标签选择器 --> 一般用来样式重置（清除默认样式）
<style> div{color:red} </style> ...... <div>这是第一个div</div> <div>这是第二个div</div>- 类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，可复用
<style> .blue{color:blue} .big{font-size:20px} .box{width:100px;height:100px;background:gold} </style> ...... <div class="blue">....</div> <h3 class="blue big box">....</h3> <p class="blue box">....</p>- id选择器
通过id来选择元素，id唯一，但类名可以有多个，一般配合js使用（不常用）
<style> #id1{color: blue} </style> ...... <p id="id1">content</p>- 层级选择器
主要应用在标签嵌套的结构中，层级选择器可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围
<style> .con{width:300px;height:80px;background:green} .con span{color:red} .con .pink{color:pink} .con .gold{color:gold} </style> ...... <div class="con"> <span>....</span> <a href="#" class="pink">....</a> <a href="#" class="gold">...</a> </div> <span>....</span> <a href="#" class="pink">....</a>- 组选择器
多个选择器有同样的样式设置
<style> .box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} </style> ... <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>- 伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态；伪元素选择器有before和after,它们可以通过样式在元素中插入内容
<style> .box1:hover{color:red} .box2:before{content:'行首文字';} .box3:after{content:'行尾文字';} </style> ... <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div> - 权重对比
- 引入方式
- 外链和内嵌权重相同，先写的会被后写的覆盖；
- 行内css权重最大，如果想覆盖他，就只能给样式中添加** !import** 来把权重提高
- 选择器权重计算
- 标签选择器权重值：1
- 类/伪类选择器权重值：10
- id选择器权重值：100
- css行内式写法权重值：1000
- !important修饰权重值：10000
- 层级选择器权重值累加计算
- 组选择器权重值不会累加
- 权重值相等时先写的会被后写的覆盖
- 从父元素继承的选择器权重值为0
- 引入方式
- 常用属性
-
布局常用样式属性
- width
- height
- background
- border
border:1px solid/dashed black --> 设置元素四周边框是1像素宽的黑色实线/虚线- border-top
- border-left
- border-right
- border-bottom
- float 设置元素浮动
- float:left; float:right;
- 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- 浮动让行内元素或块元素转化为有浮动特性的行内块元素(此时不会有行内块元素间隙问题)
- 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的子元素无法撑开父元素，父元素需要清除浮动
- 清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清除浮动样式类，clearfix
<style> .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;} </style> ... <div class="con2 clearfix"> - 设置浮动可以解决的问题小结
- 行内元素及行内块元素的间距问题
- 垂直外边距margin-top/bottom不再合并问题
- margin-top塌陷问题 --> 子元素无法定位父元素的边界，也可以给父元素加border
- 排列一行的元素默认以文字基线对齐的问题
- 但如果要实现子元素在父元素中水平居中时不能用浮动
- margin 设置外边距（元素和父元素的距离）
- margin的写法：
- 四边都为10px --> margin:10px;
- 上下10px，左右20px --> margin:10px 20px;
- 上10px，左右20px，下30px --> margin:10px 20px 30px;
- 上10px，右20px，下30px，左40px（顺时针） --> margin:10px 20px 30px 40px;
- margin-top、margin-left、margin-right、margin-bottom
- margin左右值设为auto可以实现水平居中
- margin的写法：
- padding 设置内边距（元素包含的内容和元素边框的距离）
写法同margin - 盒子模型 --> 区分margin,padding
margin是与父元素的关系，padding是与子元素的关系
真实大小：width/height+border+padding（margin不影响）
-
文本常用样式属性
- color
- font-size
- font-family
- font-weight
- font-style:normal/italic
- line-height 设置行高
line-height:24px; --> 表示文字高度+文字上下的间距是24px，也就是每一行占有的高度是24px - text-align
一般用在块元素中，内联元素宽度和内容决定 - text-indent 设置文字首行缩进
em为相对长度单位，缩进两格即为2em - text-decoration 修饰文本
text-decoration:none; --> 将文字下划线去掉
-
overflow属性设置元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式 --> overflow:hidden- visible 默认值。内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
列表
- 无序列表
<ul>
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ul>
- 有序列表
<ol>
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
- 自定义列表
<!--以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。-->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- 列表常用样式属性
list-style 设置列表中的小圆点/标号 --> list-style:none
表格
- 表格相关标签和属性
- <table> 定义表格
- <caption> 定义表格标题
- <th>定义表格的表头
- <tr>定义表格的行
- <td>定义表格单元
- <col>定义用于表格列的属性
- colspan属性 设置单元格水平合并，设置值是数值
- rowspan属性 设置单元格垂直合并，设置值是数值
- 表格常用样式属性
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
表单
- 表单相关标签和属性
- <form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，一般有“get”方式（默认）和“post”方式
- <label>标签 为表单元素定义文字标注
- <input>标签 定义通用的表单元素
- type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- 如果想让文字点击能切换，那么要加label标签，并设置for属性和对应的单选按钮的ID属性值一致；
- 必须给一组单选按钮添加name值，才可以实现单选效果；
- 设置默认选中状态，要给单选按钮添加checked=“checked”
<form action="" method="post"> 性别: <input type="radio" name="xb" id="man" checked="checked"/><label for="man">男</label> <input type="radio" name="xb" id="woman" /><label for="woman">女</label> <input type="radio" name="xb" id="secret" /><label for="secret">保密</label> </form>- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名 --> name和value属性配合传值到后端
- autofocus="autofocus"属性 刷新后让第一个输入框呈默认选中状态
- outline:none属性 文本输入框清除高亮效果
- placeholder属性 代表提示信息
placeholder属性IE低版本不兼容，但实际工作中还要使用，符合渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本显示效果好的前提下，保证了低版本浏览器不混乱）理论
- type属性
- <textarea>标签 定义多行文本输入框
不能设置rows、cols属性，因为浏览器解析的结果都不一样，必须要设置width、height属性才可以 - <select>标签 定义下拉表单元素
- <option>标签 与<select>标签配合，定义下拉表单元素中的选项
- 多组下拉菜单：添加一个optgroup标签，并设置label属性作为提示文字
- 默认选中状态：需要给对应的option添加selected属性
<select name="" id=""> <optgroup label="北京"> <option>顺义</option> <option>昌平</option> <option>海淀</option> </optgroup> <optgroup label="深圳"> <option>罗湖区</option> <option selected="selected">福田区</option> <option>宝山区</option> </optgroup> </select>
- <form>标签 定义整体的表单区域
块元素、内联元素、内联块元素
- 块元素（行元素）
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行（即使设置了宽度）
- 内联元素（行内元素）
- 不支持宽、高、margin上下、padding上下
- 宽高由内容决定
- 多个元素并在一行，如果遇到父元素边界会自动换行
- 代码换行，盒子之间会产生间距
- 解决内联元素间隙方式
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0，内联元素自身再设置font-size
- 设置浮动
- 解决内联元素间隙方式
- 内联元素直接设置文本水平对齐无效果，但父元素可以用text-align属性设置子元素水平对齐方式
- 内联块元素（行内块元素）–> 主要特性是内联元素，结合了块元素
- 支持全部样式（支持宽高、margin、padding）
- 如果没有设置宽高，宽高由内容决定
- 多个元素并在一行，如果遇到父元素边界会自动换行
- 代码换行，盒子会产生间距
- 可以用text-align属性设置子元素水平对齐方式
- display属性相互转化元素类型
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- inline-block 元素以内联块元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横向页码显示</title>
<style>
.page{
/* 列表样式重置 */
margin: 0px;
padding: 0px;
list-style: none;
width: 960px;
height: 40px;
border: 1px solid lightgray;
/*设置整个列表水平居中*/
margin: 50px auto 0px;
/* 设置父元素的水平居中来让子元素整体水平居中 */
text-align: center;
/* 让内部的子元素之间没有间距（解决内联元素间隙方式2） */
font-size: 0px;
}
.page li{
/* li标签是块元素，默认纵向排列，转成行内块之后就可以排列在一行 */
display: inline-block;
/* 控制子元素的子体大小 因为字体大小会继承 */
font-size: 12px;
}
.page a{
color: black;
text-decoration: none;
background-color: gold;
/* 让a标签中的文字在黄色框中垂直居中 */
line-height: 26px;
/* 变相让a标签加大 */
padding: 0px 9px;
font-family: "Microsoft YaHei";
/* 把行内元素转换成行内块 让它可以设置宽高或内边距 */
display: inline-block;
height: 26px;
/*增加间距*/
margin: 7px 5px 0px;
}
.page a:hover {
color: white;
background-color: red;
}
</style>
</head>
<body>
<ul class="page">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><span>...</span></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
673
