建设网站的岗位,wordpress更新文章收录,天津关键词自动排名,企业网站建设方案包含目录
展示用户信息的标签
1.文本标签 span
2.标题标签 h1~h6
3.竖着布局的标签 div
4.段落标签 p
5.超链接标签 a
5.1跳转至网上的资源
5.2锚点
6.列表标签
6.1有序列表 ol
6.2无序列表 ul
7.图片标签 img
7.1相对路径
7.1.1兄弟关系
7.1.2叔侄关系
7.1.3表兄弟…目录
展示用户信息的标签
1.文本标签 span
2.标题标签 h1~h6
3.竖着布局的标签 div
4.段落标签 p
5.超链接标签 a
5.1跳转至网上的资源
5.2锚点
6.列表标签
6.1有序列表 ol
6.2无序列表 ul
7.图片标签 img
7.1相对路径
7.1.1兄弟关系
7.1.2叔侄关系
7.1.3表兄弟关系
7.2绝对路径
8.表格标签
8.1形成一个表格
8.2表格的大小以及边框
8.3表格的优化
8.4单元格合并
8.4.1行合并 rowspan
8.4.2列合并 colspan
9.框架标签 窗口标签 iframe
收集用户信息的标签
1.input type
1.1.单行文本框 text
1.2.密码框 password
1.3.单选框 radio
1.4.复选框 checkbox
1.5.文件选择器 file
1.6.颜色拾取器 color
1.7.日期选择器 date
1.8.日期时间选择器 datetime-local
1.9.周选择器 week
1.10.滑块 range
1.11.数字输入框 number
2.下拉框 select
3.多行文本域 textarea
4.按钮
4.1普通按钮 button
4.2重置按钮 reset
4.3提交按钮 submit
音频和视频
1.音频 audio
2.视频 video 展示用户信息的标签
1.文本标签 span
spanhello/span可以添加 style 样式
span stylecolor : greenhello/span2.标题标签 h1~h6
h1h1标题/h1逐级减小, h4标题和文本一样大 .
3.竖着布局的标签 div
div竖着布局的标签/div4.段落标签 p
p段落标签/p段落标签是竖着布局的, 不同点是两个段落之间有较大的空隙
5.超链接标签 a
5.1跳转至网上的资源
a hrefhttps://www.baidu.com/超链接至百度/ahref 里面写想要跳转的网址,这里以百度为例
在这里我们没有写 target 属性, 所以 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下
a hrefhttps://www.baidu.com/ target_blank超链接至百度/a5.2锚点
为了实现同一页面上不同位置的跳转, 我们使用 name 属性标记需要到达的地方
a nameaaa/a然后使用超链接传送到目标位置
a href#aaa跳转到aaa/a当多个超链接叠放在一起时, 它们会在同一行显示 为了让不同超链接竖着布局, 我们添加
a href#aaa跳转到aaa/abr
a href#bbb跳转到bbb/abr
a href#ccc跳转到ccc/a为了让超链接固定在网页的某个位置,我们可以添加 style 属性, 如下
a href#aaa styleposition: fixed; right: 100px; bottom: 50px;跳转到aaa/a当多个超链接叠放在一起时, 我们可以把它们放在一个块级元素中 ? ?span styleposition: fixed; right: 100px; bottom: 50px;? ? ? ?a href#aaa跳转到aaa/abr? ? ? ?a href#bbb跳转到bbb/abr? ? ? ?a href#ccc跳转到ccc/a? ?/span6.列表标签
6.1有序列表 ol ? ?ol? ? ? ?li这是有序标签/li? ? ? ?li这是有序标签/li? ? ? ?li这是有序标签/li? ?/olol 即 Ordered Labels 为了把标签前面的序号修改为大小写字母或其他符号, 我们可以使用 type 关键字, 例如
ol typea/ol除此之外,我们还可以使用 start 标签控制编号从几开始, 例如 ? ?ol typea start2? ? ? ?li这是有序标签/li? ? ? ?li这是有序标签/li? ? ? ?li这是有序标签/li? ?/ol6.2无序列表 ul ? ?ul? ? ? ?li这是无序标签/li? ? ? ?li这是无序标签/li? ? ? ?li这是无序标签/li? ?/ul7.图片标签 img
在 src 属性里写资源路径, 路径分为相对路径和绝对路径. 图片加载失败时, 显示 alt 属性里面的内容.
7.1相对路径
在相对路径中, 图片与图片有三种位置关系, 分别是兄弟关系 叔侄关系 表兄弟关系
7.1.1兄弟关系
当 html 文件和 jpg 文件在同一个包中, 它们之间是兄弟关系, 形如 html index.html pic.jpg img srcpic.jpg alt一张图片为了控制图片的大小,我们使用 style 属性定义宽和高, 形如
img srcpic.jpg alt一张图片 stylewidth: 400px; height: 300px7.1.2叔侄关系
当 html 文件与 jpg 的父级在同一个包中, 它们之间是叔侄关系, 形如 index.html img pic.jpg img srcimg/pic2.jpg alt一张图片 stylewidth: 400px; height: 300px7.1.3表兄弟关系
当 html 文件的父级与 jpg 的父级在同一个包中, 它们之间是表兄弟关系, 形如 html index.html img pic.jpg 首先使用 …/ 返回上级, 然后按照叔侄关系处理
img src../img/pic3.jpg alt一张图片 stylewidth: 400px; height: 300px7.2绝对路径
联网复制图片网址, 赋值给 src 即可
8.表格标签
8.1形成一个表格
table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下 ? ?table? ? ? ?tr? ? ? ? ? ?tdid/td? ? ? ? ? ?td姓名/td? ? ? ? ? ?td年龄/td? ? ? ? ? ?td性别/td? ? ? ?/tr? ?/table此为一行四列 ? ?table? ? ? ?tr? ? ? ? ? ?tdid/td? ? ? ? ? ?td姓名/td? ? ? ? ? ?td年龄/td? ? ? ? ? ?td性别/td? ? ? ?/tr? ? ? ?tr? ? ? ? ? ?td1/td? ? ? ? ? ?td张三/td? ? ? ? ? ?td13/td? ? ? ? ? ?td男/td? ? ? ?/tr? ? ? ?tr? ? ? ? ? ?td9/td? ? ? ? ? ?td李四/td? ? ? ? ? ?td14/td? ? ? ? ? ?td女/td? ? ? ?/tr? ? ? ?tr? ? ? ? ? ?td85/td? ? ? ? ? ?td王五/td? ? ? ? ? ?td15/td? ? ? ? ? ?td男/td? ? ? ?/tr? ?/table此为四行四列 8.2表格的大小以及边框
为了让表格有边框, 我们添加 border 属性
table border1/table我们使用 width, height 控制表格的宽和高
table border1 width300px height150px/table8.3表格的优化
相较于 标签, 标签有加粗和居中的效果 ? ?table? ? ? ?tr? ? ? ? ? ?th/th? ? ? ?/tr? ?/table为了不让内容紧贴边框, 我们使用 cellpadding 属性控制单元格填充度
table cellpadding10px/table为了改变单元格间的间距, 我们使用 cellspacing 属性, 通常将其置为 0 以取消间距
table cellspacing0/table被 标签包围的行在顶端显示, 被 标签包围的行在底端显示, 在中间显示
8.4单元格合并
8.4.1行合并 rowspan
rowspan 将不同行合并
td rowspan3/td8.4.2列合并 colspan
colspan 将不同列合并
td colspan2/td9.框架标签 窗口标签 iframe
iframe src/iframe在 src 中放入目标网址, 以牛客为例
iframe srchttps://www.nowcoder.com//iframe此时的窗口是有边框的, 为了取消边框, 我们把 frameborder 属性设置为 0
iframe srchttps://www.nowcoder.com/ frameborder0/iframe为了修改窗口大小, 我们调整宽高属性
iframe srchttps://www.nowcoder.com/ frameborder0 width1650px height800px/iframe我们可以使用 name 属性标识窗口, 配合超链接的target 属性达到在此窗口跳转不同链接的效果 a hrefhttps://www.nowcoder.com/ targetabc跳转到牛客/aa hrefhttps://leetcode.cn/ targetabc跳转到力扣/aa hrefhttps://www.bilibili.com/v/douga/ targetabc跳转到bilibili/aiframe srchttps://www.nowcoder.com/ nameabc frameborder0 width1650px height800px/iframe收集用户信息的标签
1.input type
使用 input 标签收集用户信息时, 根据 type 属性的值进行区分
1.1.单行文本框 text
input typetext 单行文本框1.2.密码框 password
input typepassword 密码框1.3.单选框 radio
使用 name 属性进行匹配, name 值相同为一组
input typeradio namesex 男 input typeradio namesex 女 单选框1.4.复选框 checkbox
input typecheckbox 足球 input typecheckbox 篮球 input typecheckbox 排球 复选框1.5.文件选择器 file
input typefile1.6.颜色拾取器 color
input typecolor1.7.日期选择器 date
input typedate1.8.日期时间选择器 datetime-local
input typedatetime-local1.9.周选择器 week
input typeweek1.10.滑块 range
input typerange滑块的属性: min 最小值, max 最大值, value 滑块的默认值
input typerange min0 max100 value801.11.数字输入框 number
数字输入框中只能输入数字
input typenumber数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长
input typenumber min0 max100 value80 step52.下拉框 select ? ?select? ? ? ?option语文/option? ? ? ?option数学/option? ? ? ?option英语/option? ? ? ?option体育/option? ?/select3.多行文本域 textarea
textarea cols30 rows10/textarea4.按钮
4.1普通按钮 button
input typebutton value普通按钮14.2重置按钮 reset
input typereset value重置按钮2重置按钮会将同一个 form 表单内的输入内容重置 4.3提交按钮 submit
input typesubmit value提交按钮3提交按钮会将同一个 form 表单内的输入内容提交, 提交后会刷新 ? ?form? ? ? ?textarea cols30 rows10/textarea brbr? ?? ? ? ?input typebutton value普通按钮1brbr? ? ? ?input typereset value重置按钮2brbr? ? ? ?input typesubmit value提交按钮3? ?/form音频和视频
1.音频 audio
audio src controls/audio在 src 中写资源路径, 加入 controls 属性后手动控制音频播放 将 controls 属性改为 autoplay 属性, 进入网页自动播放
audio src autoplay/audio2.视频 video
video src controls width500px height100px/video
