目录
HTML
HTML:超文本标记语言
文档结构
<!DOCTYPE html> <!-- 文档声明 --> <html lang="en" 语言 head 网站配置信息 --> Meta charset="UTF-8" 解码方式 title>三味书屋</ 网站标题 > body 网站显示内容 h1>三味书屋欢迎你html>
head标签
1.Meta文档字符编码
> 设置字符编码为utf-8 >我的网页>这是一个网页>
2.Meta页面刷新
3.Meta关键字
4.Meta设置网站描述信息
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标签:超链接标签
a>python>
a href="">
="http://www.pythonav.com" target="_self">
要注意:
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
这两种写法都可以 ="#">校花网="javascript:void(0);">
5.设置瞄点
> .c1{ height: 600px; width background-color green; } .c2 red} div id="top">顶部位置div 设置瞄点 class="c1"></="c2"="#top">回到顶部 回到设置瞄点的位置 >
5.img标签:图片标签
width:设置宽度
height:设置高度
6.div标签和span标签
块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li →块级标签能够包含内联标签,和某些块级标签
内联标签(行内标签):不独占一行,img\a\span →只能包含内联标签,不能包含块级标签
关于标签的嵌套:
内敛标签不能设置高度宽度,它的高度宽度由内容来决定,只能嵌套内敛标签
7.p标签:上下有边距
p>李博伦>
8.ul标签和ol标签:列表标签
> 李博伦的爱好 ul type="none"> li>抽烟>喝酒>烫头ul c9h的爱好 ol ="A" start="2">学习>跑步>吃饭ol>
运行结果如下图所示
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>
运行结果如下图所示
CSS
CSS:称为层叠样式表
CSS样式引入方式
第一种:head标签引入
第二种:外部引入CSS文件
="stylesheet"="ceshi.css" href对应的是文件路径 >
第三种:内联样式
内联样式 ="background-color: red;height: 100px;width: 200px;">
CSS选择器
1.元素选择器
元素选择器 100px>
2.id选择器
id选择器 #d1 id属性值不能重复 ="d1">
3.类选择器
类选择器 类值可以重复 ="d1" class="d2">李亚是猪="d3">李亚蠢蛋子>
4.属性选择器
5.后代选择器
后代选择器 .c1 .c2 color darkgrey} 儿子选择器 .c1 > span antiquewhitespan >这是span1span>这是span2>这是span4>这是span3>
6.组合选择器(逗号连接)
组合选择器 #d1 span,#d3 span bisque>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。