您的位置：首页 > 数码常识数码常识
web前端基础-HTML及CSS选择器（html的css选择器）
2025-05-12人已围观
web前端基础-HTML及CSS选择器（html的css选择器）
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基本结构二、html标签1、标题标签2、a标签3、img标签4、div和span标签5、列表标签6、表格标签7、form表单8、select下拉框标签9、textarea标签三、CSS1、css样式引入方式2、标签嵌套3、css选择器一、html基本结构
基本结构如下：
link图标：标题图标：写法：<link rel=“icon” href=http://sjzlt.cn/shuma/“图片路径”>
二、html标签
标签写法分类：1、全封闭标签，如<h1>xxx</h1>标签属性：<h1 xx=“ss”>xxx</h1> xx:属性名 ss:属性值2、自封闭标签：<meta charset=“UTF-8”>
1、标题标签
<h1></h1>-<h6></h6>：表示一级标题到六级标题
页面效果：
2、a标签
跳转对应网址的页面未访问之前是蓝色字体，访问后变紫色
# 要a标签的效果，但不刷新或跳转页面：<a href="http://sjzlt.cn/shuma/154837#">xxx</a><a href=http://sjzlt.cn/shuma/“javascript:void(0);”>xxx</a>
锚点：页面内容进行跳转标签设置id属性=值(xx),a标签href属性的值写法href=http://sjzlt.cn/shuma/’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置
页面效果：
可通过第二个按钮跳转到百度：
3、img标签
img标签：页面插入图片src属性：图片路径 必须写alt属性：图片加载失败或者正在加载时提示的内容title属性：鼠标悬浮时显示的内容，不是img标签独有的width：设置图片宽度（建议用css设置）height：设置图片高度（建议css设置）
页面效果：
4、div和span标签
没有任何文本修饰效果：
页面效果：
扩展：标签分类块级标签(行外标签)：独占一行，h1-h6、p、br、hr、div、ul、li块级标签可以包含内联标签，以及某些块级标签内联标签(行内标签)：不独占一行，img/a/span，只能包含内联标签，不能包含块级标签
5、列表标签
1）ul标签：写法：
2）ol标签写法：
3）dl标签
页面效果：
6、表格标签
可以在网页中生成表格写法：
colspan：横行合并rowspan：纵列合并示例
页面效果：
7、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默认值可将存储的数据变短
页面效果：
8、select下拉框标签
示例：
页面效果：
9、textarea标签
多行文本输入框
页面效果：
三、CSS1、css样式引入方式
第一种：直接在头部添加<style>引入：
页面效果：
第二种：外部文件引入<link rel=“stylesheet” href=http://sjzlt.cn/shuma/“css文件路径”>html文件：
css文件：
页面效果：
第三种：内联样式：
页面效果：
块级标签能够设置高度宽度，能够嵌套某些块级标签和内联标签，p不能嵌套块级标签，也不能嵌套p标签
内联标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内联标签
2、标签嵌套
页面效果：
3、css选择器元素选择器：标签名称{css属性:值}id选择器：html写标签时：
页面效果：
3）类选择器class后面跟类，表示一类，可统一改渲染效果
页面效果：
4）属性选择器可自定义属性选择
页面效果：
后代选择器加>为子代选择器，只渲染子代，不加为后代选择器，子代及所有后代皆渲染
页面效果：
6）组合选择器后代选择器用逗号组合：
页面效果：
建议收藏，不然刷着刷着就可能找不到了。
上面就是小居数码小编今天给大家介绍的关于（html的css选择器）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
excel入门基础和怎样制作表格（excel入门基础知识）
零基础怎么学好cad制图（cad制图零基础入门教程）
office2016完全自学教程（Office2016基础教程）
初学者ps修图步骤图解（ps修图基础教程）
154837
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基本结构二、html标签1、标题标签2、a标签3、img标签4、div和span标签5、列表标签6、表格标签7、form表单8、select下拉框标签9、textarea标签三、CSS1、css样式引入方式2、标签嵌套3、css选择器一、html基本结构
基本结构如下：
link图标：标题图标：写法：<link rel=“icon” href=http://sjzlt.cn/shuma/“图片路径”>
二、html标签
标签写法分类：1、全封闭标签，如<h1>xxx</h1>标签属性：<h1 xx=“ss”>xxx</h1> xx:属性名 ss:属性值2、自封闭标签：<meta charset=“UTF-8”>
1、标题标签
<h1></h1>-<h6></h6>：表示一级标题到六级标题
页面效果：
2、a标签
跳转对应网址的页面未访问之前是蓝色字体，访问后变紫色
# 要a标签的效果，但不刷新或跳转页面：<a href="http://sjzlt.cn/shuma/154837#">xxx</a><a href=http://sjzlt.cn/shuma/“javascript:void(0);”>xxx</a>
锚点：页面内容进行跳转标签设置id属性=值(xx),a标签href属性的值写法href=http://sjzlt.cn/shuma/’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置
页面效果：
可通过第二个按钮跳转到百度：
3、img标签
img标签：页面插入图片src属性：图片路径 必须写alt属性：图片加载失败或者正在加载时提示的内容title属性：鼠标悬浮时显示的内容，不是img标签独有的width：设置图片宽度（建议用css设置）height：设置图片高度（建议css设置）
页面效果：
4、div和span标签
没有任何文本修饰效果：
页面效果：
扩展：标签分类块级标签(行外标签)：独占一行，h1-h6、p、br、hr、div、ul、li块级标签可以包含内联标签，以及某些块级标签内联标签(行内标签)：不独占一行，img/a/span，只能包含内联标签，不能包含块级标签
5、列表标签
1）ul标签：写法：
2）ol标签写法：
3）dl标签
页面效果：
6、表格标签
可以在网页中生成表格写法：
colspan：横行合并rowspan：纵列合并示例
页面效果：
7、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默认值可将存储的数据变短
页面效果：
8、select下拉框标签
示例：
页面效果：
9、textarea标签
多行文本输入框
页面效果：
三、CSS1、css样式引入方式
第一种：直接在头部添加<style>引入：
页面效果：
第二种：外部文件引入<link rel=“stylesheet” href=http://sjzlt.cn/shuma/“css文件路径”>html文件：
css文件：
页面效果：
第三种：内联样式：
页面效果：
块级标签能够设置高度宽度，能够嵌套某些块级标签和内联标签，p不能嵌套块级标签，也不能嵌套p标签
内联标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内联标签
2、标签嵌套
页面效果：
3、css选择器元素选择器：标签名称{css属性:值}id选择器：html写标签时：
页面效果：
3）类选择器class后面跟类，表示一类，可统一改渲染效果
页面效果：
4）属性选择器可自定义属性选择
页面效果：
后代选择器加>为子代选择器，只渲染子代，不加为后代选择器，子代及所有后代皆渲染
页面效果：
6）组合选择器后代选择器用逗号组合：
页面效果：
建议收藏，不然刷着刷着就可能找不到了。
上面就是小居数码小编今天给大家介绍的关于（html的css选择器）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
excel入门基础和怎样制作表格（excel入门基础知识）
零基础怎么学好cad制图（cad制图零基础入门教程）
office2016完全自学教程（Office2016基础教程）
初学者ps修图步骤图解（ps修图基础教程）
154837
很赞哦！ ()
下一篇：返回列表