濮阳机械设备企业网站建设,德清做网站的公司,住房和城乡建设部建设司网站首页,新机发布最新消息100编程书屋_孔夫子旧书网 HTMl 的标签可以分为单个标签和成对标签。
单个标签#xff1a;html4 规定单个标签要有一个 / 表示结尾#xff0c; html5 则不用
!--单个标签--
meta
!--成对标签 --
div/div以下是HTMl中常用的一些标签…
100编程书屋_孔夫子旧书网 HTMl 的标签可以分为单个标签和成对标签。
单个标签html4 规定单个标签要有一个 / 表示结尾 html5 则不用
!--单个标签--
meta
!--成对标签 --
div/div以下是HTMl中常用的一些标签
div 标签
div 标签 主要用来将相关的内容组合到一块就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。
div 是最常见也是比较重要的标签网页布局中经常使用的一类标签。通常布局被称为 DIV CSS 布局。
divdiv 就是一个分类的存储箱子
/divp标签
p标签表示段落 在网页文字中应用的比较多。
!--段落和段落间会换行--
p第一段/p
p第二段/pH-标题标签
h标签分为六个。
标签语义h1一级标题h2二级标题h3三级标题h4四级标题h5五级标题h6六级标题
引用标题标签后字体会加粗、字号一会变大 ul 无序标签
无序标签是没有显示顺序的列表无序列表前面通常会有一个“小点” 这个小点可以用type属性控制。其中有三个展示方式不过这种方式比较固定不够灵活和美观 已经被CSS的效果代替如下
值type属性描述disc默认值实心圆circle空心圆square实心方框
举例:
!--ul标签内部只能放置li标签--
!--li标签内部可以放其他的标签--
ul typeli无序列表元素1/li !--列表项--li无序列表元素2/li
/ul实心圆
ul typediscli西红柿/lili黄瓜/li
/ul
空心圆
ul typecircleli西红柿/lili黄瓜/li
/ul
实心方框
ul typesquareli西红柿/lili黄瓜/li
/ulol 有序标签
ol 前面的标签是有序的可以是数字、字母、罗马数字等。同样控制这些样式使用的是type属性。
type属性值意义a小写英文字母编号A大写英文字母编号i小写罗马数字编号I大写罗马数字编号1数字编号默认
设置start属性表示从哪个编号开始加 reversed 表示倒叙排列
有序列表, 从2开始
ol start2li元素1/lili元素2/li
/ol小写字母表示
ol typeali元素1/lili元素2/lili元素3/li
/ol倒叙
ol reversedli元素1/lili元素2/lili元素3/li
/oldl 自定义列表
dl标签表示自定义列表
dt表示数据项dd表示数据定义 dd是dt标签的解释
dldt西红柿/dtdd红、酸/dddt黄瓜/dtdd绿、涩/dd/dlimg标签
img 用来插入图片包括但不限于以下图片格式
图片格式备注.jpg、.jpeg通常用于照片是一种有损压缩格式.png通常用于logo、背景支持透明和半透明。便携式网络图像.svg矢量图片 !-- src(source)属性 图片地址可以为相对路径也可以为绝对路径--
!-- alt 如果遇到图片无法加载的情况网页上会展示 alt的 值 --
!-- width 和 height 表示 宽和高 如果只设置一个 那么另外一个就会跟着成比例缩放--
img src./images/images.jpg alt星期一 width120 height20a 标签
用a标签来制作超级链接
!-- href 属性 表示 其他页面的链接支持相对路径和绝对路径还可以链接到其它网站 --
!--target 属性表示 打开其他链接的方式--
!-- title 属性表示 链接的标题 当鼠标移动到链接上会展示出来--
a hrefhttp://www.baidu.com targetblank title文字标题百度/a!--也可以用a标签作为锚点 锚点可以是本页面的锚点也可以是其他页面的锚点--
h1 idtitle头部标题/h1
... 此处省略一些代码
a href#title返回标题/a!--下载链接指向 doc zip zip等文件格式时a标签将成为自动下载链接--
a href./download/halou.zip发邮!-- src(source)属性 图片地址可以为相对路径也可以为绝对路径--
!-- alt 如果遇到图片无法加载的情况网页上会展示 alt的 值 --
!-- width 和 height 表示 宽和高 如果只设置一个 那么另外一个就会跟着成比例缩放--
img src./images/images.jpg alt星期一 width120 height20件/a
!-- mailto:前缀的链接是邮件链接系统将自动打开email相关软件--
a hrefmailto:halouworld126.com发邮件/a
!-- tel: 前缀链接是电话链接系统将自动打开拨号键--
a hreftel:11111111111打开!--添加 controls 后才会显示 播放控件--audio标签
audio标签用来插入音频标签 !--添加 controls 后才会显示 播放控件--
!--常用音频格式 mp3 和 ogg格式--
!--autoplay 自动播放属性--
!--loop 属性表示循环播放--
audio controls src./video/demo.mp3您的浏览器不支持 audio标签请升级
/audioaudio controls src./video/demo.mp3 autoplay loop您的浏览器不支持 audio标签请升级
/audio video标签
video 标签用于插入一段视频
!--有的视频不能播放 详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 --
!-- controls 显示视频播放控件 --
!-- autoplay 自动播放 --
!-- loop 循环播放 --
!-- 常见的 视频格式 mp4 ogv webm 等--
video controls autoplay loop src./video/5-4 RDB2.mp4 您的浏览器不支持 video标签请升级
/video其它区块标签
以前的区块标签只有div现在为了更好的方便搜索引擎抓取网站因此有了以下语义更加明确的区块标签
文档的区域比div语义上还要大一点页头网页核心部分页脚
其他的语义标签
span 标记文本标记区域没有特殊效果结合CSS使用b 标签 加粗文章可以使用CSS实现同样效果u 加下换线文字br 换行i 倾斜文字可以使用CSS实现同样效果strong 代表特别重要的文字em 需要强调的文字有一定的倾斜也可以用其配置CSS做表情文字mark 高亮文字figure 和 figcaption 。figure - 一段独立的内容 figcaption- figure 内部元素的说明性内容
表单
表单用来收集信息并且可以完成和后端的数据传输
表单中大致可以分为三种标签
form标签标识表单区域 内部的元素都可能被表单提取信息input 标签 标识输入、点击等需要和用户交互的场景datalist 下拉框支持搜索通常和input一块使用
一些表单的示例
!--action 表示要提交到后端的网址--
!--method 表示表单提交的方式通常有 get 、 post 、put、delete等--form action/save meththopost/form!--form 标签中 input 文本框 typetext 表示文本框--
!-- value 表示文本框中的值 --
!--planceholder表示提示文字在没任何输入值的情况下作为提示信息--
!--disabled 表示禁用--
input typetext value123 planceholder提示文字 disabled!---单选按钮name相等表示选择了一个另一个就不能选择了--
!--checked 表示默认被选中--
!-- value 属性表示要提交到后端服务器的值--
input typeradio nameradio_group checked
input typeradio nameradio_grouplabelinput typeradio namesex 男
/label
label input typeradio namesex 女
/label!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定--input typeradio namesex idnan
label fornan男/labelinput typeradio namesex idnv
label fornv女/label!--复选框 typecheckbox 同一组的的复选框name值应该相同 复选框也有value值 用于向服务器提交数据--
input typecheckbox namehobby valuesoccer 足球
input typecheckbox namehobby valuebasket 篮球!--密码框--
input typepassword placeholder请输入密码!-- 下拉菜单 --
selectoption valuealipay支付宝/optionoption valuewxpay微信支付/option
/select!--多文本框 rows 和 clos 分别用于设置 行数 和 列数--
textarea rows3 cols5/textarea!--三种按钮 submit 提交按钮 button 普通按钮 可以简写为 button/button reset 按钮 重置按钮--
input typebutton value普通按钮input typereset value重置按钮 input typesubmit value提交表单!--像 email 和 url 等格式如果点击提交按钮不符合格式会有提示--
form日期空间: input typedate br/时间空间: input typetime br/日期时间空间 input typedatetime-local br/文件:input typefile br/ br/数字控件: input typenumber br/拖拽条: input typerange br/搜索框: input typesearch br/网址控件: input typeurl br/邮箱控件: input typeemail input typesubmit value提交
/form!-- datalist 备选项示例 --
input typetext listprovince
datalist idprovinceoption value陕西/optionoption value山西/optionoption value河北/optionoption value山东/option
/datalist表格
可以用html渲染表格
table 标签表示表格tr 表示行td 表示单元格caption 表格的标题通常放在表格的第一行th 表示列标题 !--表格示例--
table border1caption我是标题/captiontrth第一列标题/thth第二列标题/th/trtrtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr
/table单元格的合并, clospan 用来设置td 或者th的列跨度 rowspan属性用来设置td或者th的行跨度
!--跨列示例--
table border1caption我是标题/captiontrth第一列标题/thth第二列标题/th/trtrtd colspan2跨两行/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr
/table!--跨行示例--
table border1caption我是标题/captiontrth第一列标题/thth第二列标题/th/trtrtd rowspan2第一行第一列/tdtd第一行第二列/td/trtrtd第二行第二列/td/trtrtd第三行第一列/tdtd第三行第二列/td/tr/table表格的其他标签 thead 定义表头 tbody 定义表格的主题内容 tfoot 标签定义表格底部通常用来汇总等 table border1thead th第一季度/thth第三季度/thth第二季度/thth第四季度/th/theadtbodytrth手机/thtd123/tdtd123/tdtd123/td/tr/tbodytfoottrtd汇总/td/tr/tfoot
/table
