怀民未寝，苦学HTML——关系选择器及表格表单中所涉及的属性

关系选择器分为四种——后代、子代、相邻兄弟、通用兄弟。其中后代选择器可进行跨代选择。以上图片为四种选择器在使用时的格式。接下来通过具体实验进行深入掌握应有效果代码!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title选择器练习/title style /* 通用兄弟 */ h1~p{ font-size: 80px; } /* 后代 不跨代版 */ ul li a{ color: red; text-decoration: underline; } /* 子代 不可跨代 */ articleh3{ color: green; } /* 相邻兄弟 */ h3p{ color: yellow; } /style /head body header h1 aligncenter广东云浮中医药职业学院/h1 p aligncenter欢迎来到: ins计算机学院/ins/p hr nav ul typenone lia href#首页/a/li lia href#关于我们/a/li lia href#学生风采/a/li lia href#联系方式/a/li /ul /nav /header hr main section h2最新文章/h2 article h3文章标题/h3 p这里是文章的内容简介。br可以使用br标签进行换行。/p brbrbr p想了解广东云浮中医药职业学院a hrefhttps://gdyfvccm.edu.cn/点击这里/a/p /article br aside h3侧边栏/h3 p侧边栏内容如快速链接、广告等。/p table border1 tr th专业/th th链接/th /tr tr td计算机应用技术/td tda href专业A详情页.html专业A详情/a/td /tr tr td数字媒体技术/td tda href专业B详情页.html专业B详情/a/td /tr /table /aside /section section h4联系我们/h4 form 姓名: input typetext idname namenamebr 邮箱: input typeemail idemail nameemailbr input typesubmit value提交 /form /section /main hr footer p版权所有 copy; 2024 广东云浮中医药职业学院计算机学院/p /footer /body /html实际运行效果若使用后代选择器进行跨代处理则可将原后代选择器代码替换为ul a{ color: red; }以上代码跨越了子代是为父到孙的跨代选择。属性分很多类今天大致介绍文本、背景、表格、表单使用方法也与前几章所涉及到的属性使用方式相同都是在不同标签之中添加进去以此来改变网页中元素的呈现效果。这一板块的难点就在于区分各属性这就要求新手在使用时多手动输入加深记忆而非依赖AI。熟悉之后在实际操作中HTML系统也会出现提示可供我们直接选择所需要的属性。例如屏幕录制 2026-05-01 023320实践出真知我们直接使用代码进行学习文本属性!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title文本属性/title style #first { text-align: left; /*文本对齐*/ text-decoration: underline; /*文本装饰*/ text-transform:uppercase; /*文本大小写*/ text-indent: 20px; /*首行缩进*/ } #second{ text-align: center; text-decoration: line-through; text-transform:lowercase; width: 500px; /*块元素宽度*/ height: 25px; /*块元素高度*/ background-color:yellow; /*块元素背景色*/ color: blue; /*块元素文本颜色*/ } #third{ text-align: right; text-decoration: overline; text-transform:capitalize; } /style /head body p idfirstfirst文本: 靠左对齐下划线大写字母/p p idsecondsecond文本居中对齐删除线小写字母/p p idthirdthird文本 靠右对齐上划线单词首字母大写/p /body /html背景属性!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title背景属性/title style /* 块元素可以设置宽高属性而行内元素不能设置宽高属性 */ nav{width: 300px;height: 300px; background-color: orange;} aside{width: 400px;height: 400px; background-color: gray;} h1{width: 550px;height: 40px; background-color: gray;} aside span{width: 550px;height: 40px; background-color: green;} header{ width: 400px; height: 400px; background-color: gray; } #photo1{ /*当前元素宽高若用百分数取值比如25% 则是相对于父元素而言*/ width: 200px; height: 200px; border-color: red; /*边框颜色红色*/ border-style: dashed; /*边框线型虚线*/ border-width: 20px; /*边框宽度*/ opacity: 0.5; /*图像不透明度取值范围0~1*/ } footer{ /*设置块元素的宽高 */ width: 1000px; height: 1000px; /*设置块元素的填充色 */ background-color: gray; /*填充图片设置图片背景的存储路径 上下左右居中 */ background-image:url(./img_src/photo1.jpg); /*设置图片背景在块元素中是否平铺 no-repeat 不平铺 repeat上下左右平铺 repeat-x左右平铺 repeat-y上下平铺*/ background-repeat: no-repeat; /*设置图片背景的尺寸或相对于块元素的大小 上下左右居中 */ background-size: 50% 25%; /*设置图片背景在块元素的位置 上下左右居中 */ background-position: center top; } /style /head body header img src./img_src/photo1.jpg idphoto1 /header nav/nav main article h1一级标题123哈456789/h1 /article brbr aside span侧边栏6666666666/span /aside /main brbr footer /footer /body /html表格属性!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格属性/title style table{ width: 400px; height: 200px; border-width: 2px; /*表格外框厚度*/ border-color: red; /*表格外框颜色*/ border-style: solid; /*表格外框线型*/ /*border: 2px red solid; */ /*支持三个属性合并写*/ border-collapse: collapse; /*边框线折叠*/ background-color:yellow; /*整张表格背景色*/ color: black; /*整张表格文本颜色*/ } th, td{ border: 2px red solid; text-align:right; /*单元格文本水平对齐 left,right,center*/ vertical-align:bottom; /*单元格文本垂直对齐 top,bottom,center*/ } th{ background-color:gray; /*单元格背景色*/ color: blue; /*单元格文本颜色*/ } /* #th0{ background:red url(data:image/svgxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNmMGYwZjIiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg) no-repeat 100% center; } */ /style /head body table border1 tr th scopecol idth0无/th th scopecol列标题1/th th scopecol列标题2/th /tr tr th scopecol行标题1/th td idtd5普通单元格1/td td普通单元格2/td /tr tr th scopecol行标题2/th td普通单元格3/td td普通单元格4/td /tr /table /body /html这里有一个我们尤其要注意的点——border-collapse: collapse; /*边框线折叠*/以往我们不添加此属性时所生成的表格如下所示是有着双层边框线这与我们日常所熟悉的表格是不同的所以我们可添加折叠边框线。“th, td”则是等价写法表示同时选中。而后的th{background-color:gray; /*单元格背景色*/color: blue; /*单元格文本颜色*/}则向我们展现了属性中的一个极其重要的原则——后来居上原则当我们运行后就会发现th标签生成的表头不会呈现黄色而是灰色表格表单的合并!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表单表格属性/title style table{ width: 400px; height: 200px; border-width: 2px; /*表格外框厚度*/ border-color: red; /*表格外框颜色*/ border-style: solid; /*表格外框线型*/ /*border: 2px red solid; */ /*支持三个属性合并写*/ border-collapse: collapse; /*边框线折叠*/ background-color:yellow; /*整张表格背景色*/ color: black; /*整张表格文本颜色*/ } th, td{ border: 2px red solid; text-align:right; /*单元格文本水平对齐 left,right,center*/ vertical-align:bottom; /*单元格文本垂直对齐 top,bottom,center*/ } th{ background-color:gray; /*单元格背景色*/ color: blue; /*单元格文本颜色*/ } .text1{ border:3px double orange; /*3px双线橙色边框*/ color:#03c; /*文字颜色为蓝色*/ } .text2{ border:1px dashed blue; /*1px实线蓝色边框*/ width: 400px; height:20px; background:white url(./img_src/photo1.jpg) repeat; /*背景图像重复*/ } .btn00{ border:4px dashed red; background-color: pink; opacity: 0.3; } .btn01 {width:107px;height:37px; border:none; /*无边框背景图像本身就是边框风格的图像*/ cursor:pointer; /*鼠标样式为手型*/ font-size:14px; font-weight:bold; /*字体加粗*/ color:black; /*文字颜色为白色*/ } /style /head body table border1 tr th scopecol idth0无/th th scopecol列标题1/th th scopecol列标题2/th /tr tr th scopecol行标题1/th td idtd5普通单元格1/td td普通单元格2/td /tr tr th scopecol行标题2/th td普通单元格3/td td普通单元格4/td /tr /table brbrhrbrbr p input typetext namenormal 默认样式的文本域 /p p input namechbd typetext value输入的文字显示为蓝色 classtext1 改变了边框颜色和文字颜色的文本域 /p p input namepassword typepassword classtext2 增加了背景图片的文本域 /p p input namebutton typesubmit value提交 / 默认风格的提交按钮 /p p input namebutton00 typesubmit classbtn00 idbutton0 value登录 这是一个加大的虚线边框填充粉色透明度为0.3的按钮 /p p input namebutton01 typesubmit classbtn01 idbutton1 value注册 鼠标悬停变手指的无边框按钮 /p /body /html最后为大家分享一个很有用的tips在这个位置的这一个能将代码切出两个屏幕这样在进行编译的时候就不需要不断上下翻动