web前端基础-HTML及CSS选择器（html的css选择器）
林恩达优秀作者
原创内容 来源：小居数码网 时间：2024-08-12 09:12:01 阅读() 收藏：24 分享：61 爆
导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有2943个文字，大小约为11KB，预计阅读时间8分钟。
HTML及CSS选择器一、html基本结构二、html标签1、标题标签2、a标签3、img标签4、div和span标签5、列表标签6、表格标签7、form表单8、select下拉框标签9、textarea标签三、CSS1、css样式引入方式2、标签嵌套3、css选择器一、html基本结构html是一种超文本标记语言，进行网页页面的文本编辑html注释写法：<!--注释内容-->
html的css选择器
HTML及CSS选择器
一、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.jpg"></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://" 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.jpg" 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>页面效果：
建议收藏，不然刷着刷着就可能找不到了。
上面就是小居数码小编今天给大家介绍的关于（html的css选择器）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
- excel入门基础和怎样制作表格（excel入门基础知识）
- 零基础怎么学好cad制图（cad制图零基础入门教程）
- office2016完全自学教程（Office2016基础教程）
- 初学者ps修图步骤图解（ps修图基础教程）
（454）个朋友认为回复得到帮助。
部分文章信息来源于以及网友投稿，转载请说明出处。
本文标题：web前端基础-HTML及CSS选择器（html的css选择器）：http://sjzlt.cn/shuma/154837.html
猜你喜欢
- excel入门基础和怎样制作表格（excel入门基础知识）
- 零基础怎么学好cad制图（cad制图零基础入门教程）
- office2016完全自学教程（Office2016基础教程）
- 初学者ps修图步骤图解（ps修图基础教程）
- 软件测试的基本知识（软件测试过程中最基础性的测试）
- 基础办公软件有哪些应用（基础办公软件有哪些）
- excel表格入门基础教程（excel新手入门教程）
- office完全自学教程（office基础教程自学）
- ps零基础入门篇（ps入门教程零基础教程）
- 基础五笔输入法介绍（五笔输入法怎么用）
- c语言总结笔记（c语言语法基础知识）
- jquery选择器包含哪几大类（jquery选择器有哪些）
精选文章
-
-
-
-
-
-
-
-
天龙功放声音模式设置（天龙功放音量调
1464 -
懂行的人建议买华为还是荣耀手机（华为
1269 -
