中国建设银行的网站,wordpress打不开首页,wordpress全景主题,拍个宣传片大概要多少钱一、列表
列表都不是单打独斗的#xff0c;通常都是一组标签组成
1 无序列表
作用#xff1a;定义一个没有顺序的列表结构
由两个标签组成#xff0c;ul#xff08;容器级标签#xff09;#xff0c;li#xff08;容器级#xff09;
ul#xff1a;英文ulordered …一、列表
列表都不是单打独斗的通常都是一组标签组成
1 无序列表
作用定义一个没有顺序的列表结构
由两个标签组成ul容器级标签li容器级
ul英文ulordered list无序列表
li英文list item列表项 无序列表的基本使用
h2古典四大名著/h2
ulli三国演义/lili西游记/lili红楼梦/lili水浒传/li
/ul需要注意的是ul内部嵌套li它们是父子关系。
规定ul标签的内部必须只能嵌套lili标签的内部可以嵌套任何标签甚至是ul
下面的写法是错误的因为ul标签的内部不能嵌套除了li标签以外的其他标签
ulp西游记/pp三国演义/p
/ul列表的拓展li标签内部可以继续嵌套列表结构
h2四大名著/h2
ullih3西游记/h3ulli唐僧/lili孙悟空/lili猪八戒/lili沙悟净/li/ul/lilih3水浒传/h3ulli宋江/lili武松/lili林冲/lili卢俊义/li/ul/lilih3红楼梦/h3ulli林黛玉/lili薛宝钗/lili王熙凤/lili贾宝玉/li/ul/lilih3三国演义/h3ulli刘备/lili曹操/lili孙权/lili张飞/li/ul/li无序列表项之间没有先后顺序之分的
列表项之前的前缀样式是有CSS去控制的目前只负责结构的搭建就可以了
2 有序列表
作用定义一个有序列表的列表结构
需要有两个标签组成olli
ol英文ordered list有序列表
li英文list item列表项
需要注意的是ol内部嵌套li它们是父子关系。
规定ul标签的内部必须只能嵌套lili标签的内部可以嵌套任何标签甚至是ul 基本使用
h2三年级排名情况/h2
olli三年级2班/lili三年级1班/lili三年级2班/li
/olol标签的嵌套
h2三年级期末考试排名/h2
ollih3三年级2班/h3olli王同学/lili张同学/lili李同学/li/ol/lilih3三年级1班/h3olli樊同学/lili周同学/lili孟同学/li/ol/lilih3三年级3班/h3olli刘同学/lili赵同学/lili李同学/li/ol/li
/ol我们看得出来ol和ul的最大区别就是使用场景一个是有序一个是无序
我们看一下企业中无序列表标签的使用场景 比如腾讯网 有序列表的使用场景更多的是用来有排行的网页布局比如九酷音乐排行 3 定义列表
作用定义一个标题和内容自定义的列表结构由三个标签组成dldtdd
dl英文definition list 表示创建一个自定义列表结构
dt英文definition term定义主题或者定义术语表示一个列表的主题
dd英文definition description 定义解释项表示解释和说明前面的主题内容
dl内部只能存放dt和dddt和dd是同级关系
基本使用
h2国内女明星/h2
dldt杨幂/dtdd作品《三生三世》、《宫》、《仙剑奇侠传》等/dddt赵丽颖/dtdd作品《花千骨》、《楚乔传》、《陆贞传奇》等/dddt刘诗诗/dtdd作品《步步惊心》、《仙剑奇侠传》、《女医明妃传》等/dd
/dl3.每个dt主题的后面可以跟0-多个解释的dd每个dd解释的就是上一个最近的dt
dldt杨幂/dtdd作品《三生三世》、《宫》、《仙剑奇侠传》等/dddd家庭小糯米/dddd迪丽热巴/dddt赵丽颖/dtdd作品《花千骨》、《楚乔传》、《陆贞传奇》等/dddd家庭冯绍峰/dddt刘诗诗/dtdd作品《步步惊心》、《仙剑奇侠传》、《女医明妃传》等/dddd家庭吴奇隆/dd
/dl4.dt和dd都是容器级标签内部可以存放任意内容
dldt杨幂/dtddp作品《三生三世》、《宫》、《仙剑奇侠传》等/pp家庭小糯米/pp工作室迪丽热巴/p/dddt赵丽颖/dtddp作品《花千骨》、《楚乔传》、《陆贞传奇》等/pp家庭冯绍峰/p/dddt刘诗诗/dtddp作品《步步惊心》、《仙剑奇侠传》、《女医明妃传》等/pp家庭冯绍峰/p/dd
/dl定义列表的使用场景 我们通过查看京东网站的源码之后发现dl、dt和dd都是一套标签组成一个页面有多个dl并不是一个dl内部嵌套多个dt和dd原因是因为这样会方便搭建布局 下面的定义列表结构是工作中常用的
dldt杨幂/dtddp作品《三生三世》、《宫》、《仙剑奇侠传》等/pp家庭小糯米/pp工作室迪丽热巴/p/dd
/dl
dldt赵丽颖/dtddp作品《花千骨》、《楚乔传》、《陆贞传奇》等/pp家庭冯绍峰/p/dd
/dl
dldt刘诗诗/dtddp作品《步步惊心》、《仙剑奇侠传》、《女医明妃传》等/pp家庭冯绍峰/p/dd
/dl二、表格 表格基础
表格主要有三个标签组成
table英文table作用是定义了一个表格的结构
tr英文是table rows作用定义了表格的行
td英文是table dock作用是定义表格的单元格
关系tabletrtd 案例三行四列表格
table border1 styleborder-collapse:collapsetrtd第1行第1列/tdtd第1行第2列/tdtd第1行第3列/tdtd第1行第4列/td/trtrtd第2行第1列/tdtd第2行第2列/tdtd第2行第3列/tdtd第2行第4列/td/trtrtd第3行第1列/tdtd第3行第2列/tdtd第3行第3列/tdtd第3行第4列/td/tr
/tabletable标签上有两个属性一个是border“1”这个属性是用来设置表格的边框的如果没有这个属性边框不显示第二个属性styleborder-collapse:collapse是css样式作用就是合并表格 如果表格需要设置表头可以使用trth设置
trth第1列/thth第2列/thth第3列/thth第5列/th
/tr2 单元格合并
一部分单元格需要进行跨行跨列合并可以给对应的td和th标签设置相关属性
rowspan: 上下跨行合并
colspan左右跨列合并
属性值是数字数字是几就代表跨几行或者跨几列 步骤
确定一行有多少td然后我们再看一共有几行观察哪个单元格有合并设置对应属性
案例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
table border1 styleborder-collapse: collapse;trtd colspan21/tdtd rowspan22/tdtd colspan33/tdtd4/td/trtrtd rowspan25/tdtd6/tdtd7/tdtd8/tdtd rowspan29/tdtd10/td/trtrtd rowspan211/tdtd12/tdtd colspan213/tdtd rowspan214/td/trtrtd15/tdtd16/tdtd17/tdtd colspan218/td/tr/table 3 表格分区 一个完整的表格主要包含三个部分表格标题、表格表头、表格的主体
一个table内部实际还有三个分区标签组成
caption 定义表格的主题
thead 定义表格的头部内部嵌套trth
tbody 定义表格主体内部嵌套trtd table border1!-- 主题分区 --caption各地区资产投资情况/caption!-- 表头分区 --theadtrth rowspan2地区/thth colspan2按总量分/thth colspan2按比重分/th/trtrth自年初累计亿元/thth去年同期增长%/thth自年初累计%/thth自年同期%/th/tr/thead!-- 主体分区 --tbodytrtd全国/tdtd234234/tdtd9.8/tdtd100.0/tdtd100.0/td/trtrtd全国/tdtd234234/tdtd9.8/tdtd100.0/tdtd100.0/td/trtrtd全国/tdtd234234/tdtd9.8/tdtd100.0/tdtd100.0/td/trtrtd全国/tdtd234234/tdtd9.8/tdtd100.0/tdtd100.0/td/trtrtd全国/tdtd234234/tdtd9.8/tdtd100.0/tdtd100.0/td/tr/tbody/table 三、表单元素
表单元素是网页中提供给用户进行点击或者输入的控件
1 form标签
form是表单的意思
form是容器级标签内部存放可输入的控件。如果输入的表单需要提交到数据所有的控件需要被form表单包裹
method方法的意思指的数据提交的方法属性值是post和get
action是数据提交的位置 2 input标签
input标签是输入框的一种但是不仅仅只有输入框通过type属性可以拓展多功能
input的type属性非常丰富
2.1 输入框
输入框有两个重要属性一个是value一个placeholder
value设置默认显示的内容属性值为自定义内容
placeholder 属性作用是如果没有value的时候提示用户的文字占位符 input typetext placeholder请输入用户名 2.2 密码框
通过type值为password设置的
显示效果是输入后通过掩码形式显示的 input typepassword placeholder请输入密码 2.3 单选框
通过type值为radio设置的
单选按钮都是成组出现的
要想实现一组单选按钮的互斥需要设置相同的name属性 p性nbsp;别input typeradio namesex男input typeradio namesex女input typeradio namesex保密/p 2.4 复选框
也叫多选框通过type值为checkbox设置
复选框可以通过对自身进行多次点击实现选择或者取消
多选框可以选择一个或者多个建议同一组设置同样的name属性 p爱nbsp;好input typecheckbox namehobby 运动input typecheckbox namehobby 绘画input typecheckbox namehobby 音乐input typecheckbox namehobby 阅读input typecheckbox namehobby 其他/p 单选框和多选框都有一个默认被选择的功能需要给input标签添加一个checkedchecked p性nbsp;别input typeradio namesex checkedchecked男input typeradio namesex女input typeradio namesex保密/pp爱nbsp;好input typecheckbox namehobby 运动input typecheckbox namehobby checkedchecked 绘画input typecheckbox namehobby 音乐input typecheckbox namehobby 阅读input typecheckbox namehobby 其他/p 现在有一个现象就是如果点击文字是不能触发对应单选或者多选框的点击事件的所以需要label标签去扩大触发范围 labelinput typeradio namesex checkedchecked男/label 2.5 文本域
标签是textarea
我们之前学习的input的单行输入框只能输入单行文本如果需要使用多行文本就使用textarea标签
textarea是一个双标签是文本级标签
属性值rows和cols
rows定义文本域的可视区域有几行单位是数字
cols当前行显示的字节数量以英文为准单位师数字
placeholder占位符 我们发现textarea默认是可以通过拖动右下角实现放大或者缩小文本域的如果我们不希望缩放文本域
我们可以通过设置style性的resize属性值为none去掉可拖拽区域 textarea rows4s cols50 placeholder请输入自我介绍 styleresize:none/textarea 2.6 下拉菜单
需要一组标签进行制作
需要两个标签select和option
select英文就是选择的意思表示搭建下拉项
option英文是选项的意思表示搭建下拉项
关系selectoption selectoption北京/optionoption上海/optionoption广州/optionoption深圳/option/select 现在默认的第一个是显示并不是被选中的如果希望有默认被选中想使用selected属性值也是selected selectoption北京/optionoption上海/optionoption selectedselected广州/optionoption深圳/option/select 四、HTML注释
在代码中有一些特殊结构特点是在编辑器能看到在浏览器中看不到这种结构叫做注释特点是浏览器不加载
注释主要有两个作用
第一个是用来注解代码添加合理的解释从而实现对代码的可读性 !-- 头部部分 --div classheader!-- 导航 --div classnav!-- logo内容 --div classlogo/div/div/div!-- 内容部分 --div clssscontent/div!-- 底部部分 --div classfooters/div 语法 !-- 被注释的内容 --
快捷键ctrl/
第二个作用先注释掉一部分不使用的代码便于后期恢复
我们多用于代码调试 五、字符实体 w3c手册https://www.w3school.com.cn/html/html_entities.asp
在网页中普通文字部分在键盘中是打不出来的比如我们的版权符号商标符号等等。还有一种场景就是替代字符HTML会识别一部分字符
比如下面的场景 div好开心啊今天老师带我们学习了h1标签的作用/div 我们发现浏览器会识别文本中的h1单独标签进行加载了 解决办法利用字符实体进行转换 div好开心啊今天老师带我们学习了lt;h1标签的作用/div 字符实体的规定是以符号开头‘;’结尾
罗列常用的字符实体 nbsp; 实体空格 小于号 lt; 大于号 gt; 版权符号 copy; 注册商标 reg; 引号 quot; 和号 amp; div和span
div和span都是常用的布局标签俗称盒子
div分割跨度大跨度
div是容器级标签双标签
span小区域小跨度
作用是用来分割页面的布局div指的是跨度布局分割span是文字分割
HTMLCSS又叫做divCSS
div主要作用是进行网页布局的拆分没有明确的语义
span标签的作用是一个极限小只适用于文字的跨度划分
p今天一共收入 span stylecolor:red;300/span 元/p
