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>

html的css选择器（web前端基础-HTML及CSS选择器）

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的css选择器（web前端基础-HTML及CSS选择器）

二、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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

可通过第二个按钮跳转到百度：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

扩展：标签分类
块级标签(行外标签)：独占一行，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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

三、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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

第二种：
外部文件引入
<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;
}

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

第三种：
内联样式：

<!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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

块级标签能够设置高度宽度，能够嵌套某些块级标签和内联标签，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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

后代选择器
加>为子代选择器，只渲染子代，不加为后代选择器，子代及所有后代皆渲染

<!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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

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>

页面效果：

html的css选择器（web前端基础-HTML及CSS选择器）

建议收藏，不然刷着刷着就可能找不到了。

html的css选择器（web前端基础-HTML及CSS选择器）

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选择器

相关推荐

车辆应该买哪几种保险（车辆必买的4个险了解下）

大熊猫属于什么科动物（大熊猫是猫科类动物还是熊科类动物）

惠普2700打印机怎么安装驱动（惠普2700打印机安装步骤）

电脑如何登录多个微信 简单（用电脑登录多个微信的方法）

金立L6双超待机王（金立L6+全新上市）

cad按比例画图怎么标注（cad图框比例怎么设置成1比1）

发表评论

电脑如何登录多个微信简单（用电脑登录多个微信的方法）