HTML及CSS选择器
- 一、html基本结构
- 二、html标签
- 1、标题标签
- 2、a标签
- 3、img标签
- 4、div和span标签
- 5、列表标签
- 6、表格标签
- 7、form表单
- 8、select下拉框标签
- 9、textarea标签
- 三、CSS
- 1、css样式引入方式
- 2、标签嵌套
- 3、css选择器
一、html基本结构
html是一种超文本标记语言，进行网页页面的文本编辑
html注释写法：<!--注释内容-->
基本结构如下：
<!DOCTYPE html> <!--文档声明-->
<html lang="en"> <!--lang="en"表示语言-->
<head> <!--头部信息：网站的配置信息-->
<meta charset="UTF-8"> <!--解码方式-->
<title>我是标题</title> <!--网站标题-->
</head>
<body>
</body> <!--body体：网站显示内容-->
</html>
link图标：
标题图标：
写法：<link rel=“icon” href=“图片路径”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="icon" href="timg.jpeg">
</head>
<body>
</body>
</html>
二、html标签
标签写法分类：
1、全封闭标签，如<h1>xxx</h1>
标签属性：<h1 xx=“ss”>xxx</h1> xx:属性名 ss:属性值
2、自封闭标签：<meta charset=“UTF-8”>
1、标题标签
<h1></h1>-<h6></h6>：表示一级标题到六级标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
公司
<b>Asir</b> <!--加粗-->
<s>Bsir</s> <!--加划线-->
<h1>小王</h1>
<h2>小李</h2>
<h3>小赵</h3>
<h4>小<br>胡</h4> <!--<br>换行-->
<hr> <!--<hr>加分割线-->
<h5>小周</h5>
<h6>小李</h6>
</body>
</html>
页面效果：
2、a标签
跳转对应网址的页面
未访问之前是蓝色字体，访问后变紫色
# 要a标签的效果，但不刷新或跳转页面：
<a href="#">xxx</a>
<a href=“javascript:void(0);”>xxx</a>
锚点：
页面内容进行跳转
标签设置id属性=值(xx),a标签href属性的值写法href=’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<div id="top">顶部位置</div> <!--设置锚点-->
<a>公司</a>
<a href="">potal</a>
<a href="http://www.baidu.com" target="_blank">百度</a> <!--_blank表示在新标签页打开-->
<a href="#">potal</a>
<a href="javascript:void(0);">potal</a>
<a href="#top">回到顶部</a> <!--返回锚点-->
</body>
</html>
页面效果：
可通过第二个按钮跳转到百度：
3、img标签
img标签：页面插入图片
src属性：图片路径 必须写
alt属性：图片加载失败或者正在加载时提示的内容
title属性：鼠标悬浮时显示的内容，不是img标签独有的
width：设置图片宽度（建议用css设置）
height：设置图片高度（建议css设置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1319369445,160835837&fm=26&gp=0.jpg" alt="图片未成功加载" title="清新办公" width="300" height="500">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1941575090,3819526635&fm=26&gp=0.jpg" alt="图片未成功加载" title="未闻花名">
<img src="timg.jpeg" alt="图片未成功加载" title="未闻花名2" width="1000" height="500">
</body>
</html>
页面效果：
4、div和span标签
没有任何文本修饰效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<span>小王</span>
<p>小李</p>
<span>小文</span>
<div>小林</div>
</body>
</html>
页面效果：
扩展：标签分类
块级标签(行外标签)：独占一行，h1-h6、p、br、hr、div、ul、li
块级标签可以包含内联标签，以及某些块级标签
内联标签(行内标签)：不独占一行，img/a/span，只能包含内联标签，不能包含块级标签
5、列表标签
1）ul标签：
写法：
<ul type="none">
<li>内容1</li>
<li>内容2</li>
......
<ul>
2）ol标签
写法：
<ol type="指定标注种类" start="指定标注起始值">
<li>内容1</li>
<li>内容2</li>
......
</ol>
3）dl标签
<dl>
<dt>无空位内容</dt>
<dd>有空位内容<dd>
......
</dl>
页面效果：
6、表格标签
可以在网页中生成表格
写法：
<table border="表框粗细" cellpadding="表格大小" cellspacing="表线宽度">
<thead> <!--表头信息-->
<tr>
<th>表头1</th>
<th>表头2</th>
...
</tr>
<thead>
<tbody> <!--body-->
<tr>
<td>内容1</td>
<td>内容2</td>
...
</tr>
</tbody>
</table>
colspan：横行合并
rowspan：纵列合并
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="8">
<thead> <!--表头信息-->
<tr>
<th>名称</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody> <!--body-->
<tr>
<td>小王</td>
<td>18</td>
<td>篮球</td>
</tr>
<tr>
<td rowspan="2">小李</td>
<td>20</td>
<td>游泳</td>
</tr>
<tr>
<td colspan="2">小王</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果：
7、form表单
<form action="http://127.0.0.1:8001">
</form>
action属性：指定提交路径，提交到哪里去
form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径
input标签 输入框：
input标签，如果要提交数据，一定要写name属性
<input type=“text”> 普通文本输入框
<input type=“password”> 密文输入框
<input type=“submit” value=“登陆”> 提交按钮 触发form表单提交数据动作
<input type=“reset”> 重置按钮 清空输入内容
<input type=“button” value=“注册”> 不会触发form表单提交数据的操作
<input type=“date”> 时间日期输入框
<input type=“file”> 文件选择框
<input type=“number”> 纯数字输入框
单选框：
<input type=“redio”>
多选框：
<input type=“checkbox”>
单选框和多选框请务必加name属性和value默认值
单选和多选value默认值可将存储的数据变短
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
<div>
<h1>欢迎来到xxx公司</h1>
用户名：<input type="text" name="username">
<br>
密码：<input type="password" name="password">
<br>
性别：
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1">男
<br>
爱好：
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="checkbox" name="hobby" value="3">乒乓球
<br>
<input type="reset">
<br>
<hr>
数字：
<input type="number">
<br>
<input type="date">
<br>
<input type="file">
<br>
<input type="submit" value="点击确认">
</div>
</form>
</body>
</html>
页面效果：
8、select下拉框标签
<select name="属性">
<option value="默认值">
</select>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
选择性别：
<select name="sex">
<option value="0">男</option>
<option value="1">女</option>
</select>
<br>
喜欢的明星：
<select name="star" multiple> <!--允许多选-->
<option value="1">明星1</option>
<option value="2">明星2</option>
<option value="3">明星3</option>
</select>
</body>
</html>
页面效果：
9、textarea标签
多行文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
<span>请输入内容：</span>
<br>
<textarea name="message" cols="30" rows="10"></textarea>
</body>
</html>
页面效果：
三、CSS
1、css样式引入方式
第一种：
直接在头部添加<style>引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
span{
width:100px;
height:100px;
background-color:navajowhite;
}
div{
width:100px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>
页面效果：
第二种：
外部文件引入
<link rel=“stylesheet” href=“css文件路径”>
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>
css文件：
span{
width:100px;
height:100px;
background-color:navajowhite;
}
div{
width:100px;
height:50px;
background-color:red;
}
页面效果：
第三种：
内联样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div style="background-color:red;weight:100px;height:100px">hello</div>
<span style="background-color:wheat">How are you?</span>
</body>
</html>
页面效果：
块级标签能够设置高度宽度，能够嵌套某些块级标签和内联标签，p不能嵌套块级标签，也不能嵌套p标签
内联标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内联标签
2、标签嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<div>
<span>hello</span>
</div>
<p>
<p>how old are you?</p>
</p>
</body>
</html>
页面效果：
3、css选择器
- 元素选择器：
标签名称{css属性:值} - id选择器：
html写标签时：
<div id="d1">内容</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1{
width:100px;
height:100px;
background-color:red
}
#d2{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1">你好啊</div>
<span id="d2">最近还好吗</span>
</body>
</html>
页面效果：
3）类选择器
class后面跟类，表示一类，可统一改渲染效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
.c1{
width:100px;
height:100px;
background-color:red
}
</style>
</head>
<body>
<div id="d1" class="c1">你好啊</div>
<span id="d2" class="c1">最近还好吗</span>
</body>
</html>
页面效果：
4）属性选择器
可自定义属性选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
[ss]{
width:100px;
height:100px;
background-color:red
}
[ss="dd"]{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">你好啊</div>
<span id="d2" class="c2" ss="dd">最近还好吗</span>
</body>
</html>
页面效果：
- 后代选择器
加>为子代选择器，只渲染子代，不加为后代选择器，子代及所有后代皆渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1 > span{
width:100px;
height:100px;
background-color:red
}
.c2 .c4{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
<span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
<span class="c4">how old are you?</span>
</div>
</body>
</html>
页面效果：
6）组合选择器
后代选择器用逗号组合：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1 span,#d2 span{
width:100px;
height:100px;
background-color:red
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
<span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
<span class="c4">how old are you?</span>
</div>
</body>
</html>
页面效果：
