Html常用标签
<h1>我是标题 </h1>
<img src="timg.gif">
Html骨架
<!DOCTYPE html> 文档声明
<html lang="en"> 语言：英语
<head>
<meta charset="UTF-8"> 设置页面编码，防止中文乱码
<title>Document</title> 网页标题
</head>
<body>
我是中国人
</body>
</html><p>我是一个段落</p>
<hr/> 水平线
<div>我是布局</div>
<span>布局用</span>
文本格式化标签
<b>加粗</b> <strong>加粗</strong>
<i>倾斜</i> <em>倾斜</em>
<s>过期标识</s> <del>过期标识</del>
<u>下划线</u> <ins>下划线</ins>
标签属性
<hr color="red" width="500" />
<img src="timg.jpg" height="350" title="鼠标放上去显示的文字" alt="替换文字" border="10"/>
<a href="http://www.baidu.com" target="[_blank | _self]">百度一下</a>
<a href="#">空</a> 空链接，以后经常使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
把所有的连接 都默认添加 target="_blank"
<base target="_blank" />
</head>
<body>
友情链接:
<a href="http://www.baidu.com">搜狐</a>
<a href="http://www.baidu.com" target="_self">谷歌</a>
</body>
</html>特殊字符
< 小于号 > 大于号 空格
绝对路径
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
列表
无序列表
<ul>
<li>橘子</li>
<li>橙子</li>
</ul>
有序列表
<ol>
<li>橘子</li>
<li>橙子</li>
</ol>
文本列表
<dl>
<dt>北京</dt>
<dd>昌平区</dd>
</dl>
锚点链接
<a href="#two">第2集</a> 点击后会跳到如下标识位置，本页面下的跳转
↓
<h3 id="two">第2集</h3>
新页面的跳转
<a href="test.html#next">另外一个页面的第4集</a>
↓
<h3 id="next">第4集</h3>
表格初识
* cellspacing 单元格和单元格之间的距离
* cellpadding 单元格内容距离单元边框的距离
*align 表示表格居中，表格中的文本左对齐。
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>个人信息表</caption> 表格标题
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
</table>合并单元格
1. 先确认跨列合并 colspan
2. 先上后下 先左右后
3. 删除的个数
横向合并
<tr>
<td colspan="2">123</td>
<td>测试</td>
</tr> 1. 先确认跨行合并 rowspan
2. 先上后下 先左右后
3. 删除的个数
纵向合并
<tr>
<td>123</td>
<td>abc</td>
<td rowspan="3">abc</td>
</tr>input控件
<input type="[text | radio | checkbox | button | submit | reset | image | file]" value="北京" style="color: #ccc;" />
下拉选项
<select name="" id="">
<option value="">选择年份</option> <!-- option选项 -->
<option value="">1990</option> <!-- option选项 -->
<option value="">1991</option> <!-- option选项 -->
</select>多行文本域
<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">
不支持富文本
</textarea>label标签
* for属性：绑定指定的元素，点击label标签中的内容时候，绑定的元素将会获得焦点
* accesskey属性：绑定热键，当点击热键的时候，绑定的元素会获取焦点。
<label for="btn">用户名：</label><input type="text" id="btn">
表单
<form action="" method="post">
用户名: <input type="text" name="yonghuming" value="用户名"> <br/>
密 码: <input type="password" name="mima1"><br /> <br />
性别： <input type="radio" name="sex">
<input type="submit" value="提交所填">
<input type="reset" value="重新填写">
</form>CSS的两种引入方式
<style>
h4 {
color: deeppink;
}
p {
color: #036;
}
h3 {
color: green;
}
div {
color: orange;
}
</style>
<link rel="stylesheet" href="css/style.css">类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.suibian {
color: blue;
}
</style>
</head>
<body>
<div class="suibian">我是类选择器</div>
</body>
</html>案例：谷歌标志
<style>
span{
font-size: 150px;
}
.g{
color: skyblue;
}
.o{
color:red;
}
.oo{
color: orange;
}
.l{
color: green;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
<div class="nav"></div> 导航 我们习惯性的约定
<div class="banner"></div> 导航 我们习惯性的约定
</body>
</html>多类名选择器
<style>
.color{
color:green;
}
.size{
font-size: 200px;
}
</style>
</head>
<body>
<div class="color size">我是中国人</div> 组合拳id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#last {
color: green;
}
</style>
</head>
<body>
<div id="last">id选择器</div>
</body>
</html>通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { 代表所有标签的意思 使用较少
color: pink;
}
</style>
</head>
<body>
<div>我是文字</div>
<p>我是文字</p>
</body>
</html>常用CSS
<style>
* {
font-family: "microsoft yahei", Arial; 设置字体
}
p {
font-size: 16px; 千万别忘了带px 单位
line-height: 28px; 行高 行与行之间的距离
text-indent: 2em; 段落首行缩进2个字 em 也是一个单位 1em 就是一个字的距离
}
a {
font-weight: bold; 字体加粗
font-weight: 700; 700 没有单位 == bold
}
h1 {
font-weight: normal; 让粗体不加粗
font-weight: 400; 让粗体不加粗思密达 400 == normal 建议用数值
text-align: center; 里面的文字水平居中
}
em {
color: skyblue;
font-style: normal; 让斜体不倾斜
}
span {
/*color: #ff0000;*/
color: #FDD000;
}
div {
text-align: center;
}
.nub {
color: #f00;
font-weight: 400; /*不加粗*/
}
</style>字体样式连写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
选择器{font: font-style font-weight font-size/line-height font-family;}
h1 {
font: 400 25px "宋体"; 不加粗 字号 字体
}
</style>
</head>
<body>
<h1>字体连写是有顺序的</h1>
</body>
</html>文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
text-decoration: none; 取消装饰
font-style:itelic; 字体倾斜
font-style:nomal; 字体正常
font-weight:400; 字体不加粗(700为加粗)
}
</style>
</head>
<body>
<div>字体连写是有顺序的</div>
</body>
</html>后代选择器 : 类似山西省晋城市这样的感觉
div p{
color:red;
}子代选择器
*今天在使用WebStorm的时候那个红色怎么弄就是不出来，浏览器源码已经更新，重新敲了一遍，刷了一下出来了，再牛的工具也会有小问题，一定要有这个想法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul > li > a{ ul的第一个li下第一个a标签
color: red;
}
ul li >a{ ul下所有li下的第一个a标签
color:red;
}
ul a{ ul下所有的a标签
color:red;
}
ul li a{
color:red; ul下所有的li下所有的a标签
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>后代子代选择器
*class为father下的第一个li标签下的第一个a标签→123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father > li > a {
color: red;
}
</style>
</head>
<body>
<ul class="father">
<li>
<a href="#">123</a>
<ul>
<li>
<a href="#">abc</a>
</li>
</ul>
</li>
</ul>
</body>
</html>交集选择器
*即为div 又class为red的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.red{
color: red;
}
</style>
</head>
<body>
<div class="red">我是中国人</div>
</body>
</html>并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,p,span{
color: red;
}
</style>
</head>
<body>
<div>我是中国人</div>
<p>我是外国人</p>
<span>日本人不是人</span>
</body>
</html>伪类链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link { 未访问过的连接状态
color: #3c3c3c;
font-size: 25px;
text-decoration: none; 取消下划线
font-weight: 700;
}
a:visited { 这个链接我们已经点过的样子 已访问过链接
color: orange;
}
a:hover { 鼠标经过连接时候的样子
color: #f10215;
}
a:active { 鼠标按下时候的样子
color: green;
}
</style>
</head>
<body>
<a href="#">秒杀</a>
</body>
</html>元素的显示模式：
*行内元素的高宽无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
width: 100px;
height: 100px;
background-color: #ccc;
border:1px solid red;
}
</style>
</head>
<body>
<span>我是中国人</span> 高宽无效，只在一行显示
</body>
</html>显示模式的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
display: inline; 把块级元素转换为行内元素
}
span {
width: 100px;
height: 100px;
background-color: purple;
display: block; 把行内元素转换为块级元素
}
a{
width: 100px;
height: 100px;
background-color: skyblue;
display: inline-block; 把行内元素转换为行内块元素
}
</style>
</head>
<body>
<div>123</div>
<span>abc</span>
<a href="#">百度</a>
</body>
</html>