day42:HTML标签和CSS选择器
目录1.HTML 1.1 文档结构 1.2 head标签 1.3 body标签 1.3.1 h1-h6标签 1.3.2.br标签:换行 1.3.3.hr标签:一行横线 1.3.4 a标签:超链接标签 1.3.5 img标签:图片标签 1.3.6 div标签和span标签 1.3.7 p标签:上下有边距 1.3.8 ul标签和ol标签:列表标签 1.3.9 dl标签(了解) 1.3.10 table标签:表格标签(重点) 1.3.11 form标签:表单标签 1.3.12 input标签:输入框 1.3.13 select标签:下拉框标签 1.3.14 textarea标签:多行文本输入框 2.CSS 2.1 CSS样式引入方式 2.2 CSS选择器 2.2.1 元素选择器 2.2.2 id选择器 2.2.3 类选择器 2.2.4 属性选择器 2.2.5 后代选择器 2.2.6 组合选择器(逗号连接) HTMLHTML：超文本标记语言 文档结构<!DOCTYPE html> <!-- 文档声明 --> <html lang="en" 语言 head 网站配置信息 --> meta charset="UTF-8" 解码方式 title>三味书屋</ 网站标题 > body 网站显示内容 h1>三味书屋欢迎你html> head标签1.meta文档字符编码> 设置字符编码为utf-8 >我的网页>这是一个网页> 2.meta页面刷新>这是一个标题http-equiv="Refresh" content="5" /> 网页刷新，5秒一次 >这句话有七个字> 3.meta关键字> 设置关键字，用于搜索引擎收录和关键字收索 name="keywords"="数学，语文，英语" /> >这还是一个栗子> 4.meta设置网站描述信息设置网站描述信息，用于在搜索引擎搜索时，显示网页基本描述信息="description"="我们这什么书都有">这是一个三味书屋> 5.meta触屏播放支持触屏缩放="viewport"="width=device-width,initial-scale=1,user-scalable=yes"不支触屏持缩放<meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no">--> h1 style="width: 1500px;background-color: green;">咕叽咕叽！> 6.link图标link rel="icon" href="ceshi.PNG"> 7.head内部标签总结="数学，语文，英语，物理"="三味书屋里面什么书都有"="x-ua-compatible"="IE=edge"="/image/chicken.icon"> > body标签1.h1-h6标签>Title>AAAh2>BBBh3>CCCh4>DDDh5>EEEh6>FFF> 运行结果如下图所示
2.br标签:换行>BBbr>CC> 运行结果如下图所示
3.hr标签:一行横线hr> 运行结果如下图所示
4.a标签:超链接标签1.不加href属性，就是普通文本显示 a>python> 2.加上href属性，不给href属性赋值 a href=""> 3.加上href属性，并且给href属性赋值 ="http://www.pythonav.com" target="_self"> 要注意: 跳转对应网址的页面 未访问之前是蓝色的字体颜色 ? ?访问之后是紫色的字体颜色 target属性: _self:在当前标签页打开 href属性值的那个网址 _blank:在新的标签页打开 href属性值的那个网址 4.要a标签效果，但是不刷新或者跳转页面 这两种写法都可以 ="#">校花网="javascript:void(0);"> 5.设置瞄点 > .c1{ height: 600px; width background-color green; } .c2 red} div id="top">顶部位置div 设置瞄点 class="c1"></="c2"="#top">回到顶部 回到设置瞄点的位置 > 5.img标签:图片标签img src="ceshi.PNG" alt="图片" title="这是一个图片" width="100" height="100"> src属性:图片路径 必须写 alt属性:图片加载失败或者正在加载时提示的内容 title属性:鼠标悬浮时显示的内容,不是img标签独有的 width:设置宽度 height:设置高度 6.div标签和span标签div标签和span标签没有任何的修饰效果 标签分类: 块级标签(行外标签):独占一行,h1-h6pbrhrdivulli →块级标签能够包含内联标签,和某些块级标签 内联标签(行内标签):不独占一行,imgaspan →只能包含内联标签,不能包含块级标签 关于标签的嵌套:
内敛标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内敛标签 7.p标签:上下有边距p>李博伦> 8.ul标签和ol标签:列表标签> 李博伦的爱好 ul type="none"> li>抽烟>喝酒>烫头ul c9h的爱好 ol ="A" start="2">学习>跑步>吃饭ol> type属性：控制列表内容前面的效果的 start属性：是控制有序列表标签的起始值的 运行结果如下图所示
9.dl标签(了解)dldt>吉林省dd>长春>四平>辽宁省>沈阳>大连> 运行结果如下图所示
10.table标签:表格标签(重点)table border="1" cellpadding="10" cellspacing="8"thead> tr> th>名称>年龄>爱好tbodytd>18>coc>c9h>23>王者>ph>22>看书table>
?也可以合并列和合并行 ="1"td rowspan 合并行 --> colspan>国服第一帅 合并列 --> > 运行结果如下图所示
?11.form标签:表单标签form action="http://127.0.0.1:8001"form> action属性: 指定提交路径,提交到哪里去 form表单作用:form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径 12.input标签:输入框input ="text" name="username" 普通文本输入框 ="password"="password" 密文输入框 ="submit" value="点击确认" 提交按钮（触发form表单提交数据的动作） ="reset" 重置按钮 清空输入的内容 ="button"="走你" 普通按钮（不会触发form表单提交数据的动作） ="date" 时间日期输入框 ="file" 文件选择框 ="number" 纯数字输入框 --> 单选框 --> 性别 ="radio"="sex"男 女 多选框 喜欢的明星 ="checkbox"="hobby"张三 李四 ="3"王五 > 注意：选择框写的时候，尽量将name属性和value属性都写上 运行结果如下图所示
13.select标签:下拉框标签单选 select ="sex"option value>男option>女select> 多选 ="star" multiple="multiple">张三>李四>王五="4">赵六> 运行结果如下图所示
注意:这两种写法完全相同 > > 14.textarea标签:多行文本输入框textarea ="" id cols="30" rows="10"textarea> 运行结果如下图所示
CSSCSS:称为层叠样式表 CSS样式引入方式第一种:head标签引入> /* 选择器{css属性名称:属性值;css属性名称:属性值} */ div 200px>李亚大傻吊> 第二种:外部引入CSS文件="stylesheet"="ceshi.css" href对应的是文件路径 > 创建一个ceshi.css文件
第三种:内联样式内联样式 ="background-color: red;height: 100px;width: 200px;"> CSS选择器1.元素选择器元素选择器 100px> 2.id选择器id选择器 #d1 id属性值不能重复 ="d1"> 3.类选择器类选择器 类值可以重复 ="d1" class="d2">李亚是猪="d3">李亚蠢蛋子> 4.属性选择器属性查找 [xx]} 属性带属性值查找 [xx='ss'] blue="c1" xx="ss">李亚是小猪="c2"="kk">李亚是小狗> 5.后代选择器后代选择器 .c1 .c2 color darkgrey} 儿子选择器 .c1 > span antiquewhitespan >这是span1span>这是span2>这是span4>这是span3> 6.组合选择器(逗号连接)组合选择器 #d1 span,#d3 span bisque> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
