杭州网站设计哪家公司好,wordpress教学视屏,决定网站打开的速度吗,在58做网站推广有效果吗目录
HTML定义
标签
HTML基本骨架
常见标签
标题标签 段落标签 换行与水平线标签 文本格式化标签 图像标签 绝对路径与相对路径 超链接标签 音频与视频标签 列表标签
无序列表
有序列表 定义列表
表格标签
表格结构标签
合并单元格
表单标签
input标签 input标签占…目录
HTML定义
标签
HTML基本骨架
常见标签
标题标签 段落标签 换行与水平线标签 文本格式化标签 图像标签 绝对路径与相对路径 超链接标签 音频与视频标签 列表标签
无序列表
有序列表 定义列表
表格标签
表格结构标签
合并单元格
表单标签
input标签 input标签占位文本
真正实现单选功能
上传多个文件
下拉菜单标签
文本域标签
label标签
button标签编辑 无语义的布局标签
div标签
span标签
字符实体 HTML定义
HTML是一种超文本标记语言超文本即我们在网页中看到的链接标记指的是语言中的标签 标签
标签一般成对出现结束标签比开始标签多一个/
此外标签一般分为单标签与双标签 HTML基本骨架 其中,HTML标签代表整个网页head标签代表网页的头它里面存放给浏览器看的内容比如CSSbody代表网页的主体用于存放给用户看的信息
这里也可以看出标签之间的关系共有两种兄弟关系、父子关系 常见标签 标题标签
标题标签有6种标签名为h1~h6
标签显示效果为
文字加粗字号逐渐变小独占一行 段落标签
标签名为p双标签
显示特点
独占一行段落之间存在间隙 换行与水平线标签
换行br单标签水平线hr单标签 文本格式化标签
作用为文本添加特殊格式用于突出重点例如加粗、倾斜、下划线、删除线等 图像标签
标签名img
标签属性src用于指定图像的位置
除src属性外img标签还有以下属性 这里的width属性与height属性在改变时浏览器会自动等比例调整这两个属性了解即可 绝对路径与相对路径
绝对路径在windows系统中是从磁盘开始的路径在其他系统可能是从根目录开始的路径统一使用/即可
相对路径从当前文件所在位置开始的路径 超链接标签
标签名a
属性href用于指定跳转地址 如上图所示target属性指定为_blank可以使得页面跳转是开启一个新页面而不是覆盖当前页面
在开发中如果暂时不清楚跳转地址的话可以将href属性值定位# 音频与视频标签
音频标签名audio 值得说明的是这里因为属性值与属性名一样所以可以简写为属性名即可 视频标签名video 列表标签
无序列表
标签ul嵌套liul是无序列表li是列表条目 注意ul标签里只能包裹li标签
但是li标签里可以包裹任意标签
有序列表
标签ol嵌套liol是有序列表li是列表条目 定义列表
定义列表通常用于一个网页的底部如下图所示 标签dl嵌套dt和dddl是定义列表dt是定义列表的标题dd是定义列表的描述/详情 表格标签 表格结构标签
作用使用表格结构标签把内容划分区域使得表格结构更加清晰语义更清晰
注意这些标签是对浏览器说明的只是加强语义 合并单元格 注意不能跨结构标签进行合并单元格
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd rowspan2100/tdtd199/td/trtrtd李四/tdtd98/tdtd198/td/tr/tbodytfoottrtd总结/tdtd colspan3全市第一/td/tr/tfoot/table
/body/html 表单标签
作用收集用户信息
标签名form标签
在form标签里统一管理相关标签
使用场景
登陆页面注册页面搜索页面 input标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body文本框:input typetextbrbr密码框:input typepasswordbrbr单选框:input typeradiobrbr多选框:input typecheckboxbrbr文件上传:input typefile
/body
/html input标签占位文本
即input标签中的placeholder属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body文本框:input typetext placeholder请输入用户名brbr密码框:input typepassword placeholder请输入密码
/body
/html 真正实现单选功能 注意这里的checked属性在多选框中同样适用 上传多个文件
在原先的input标签中添加属性multiple即可一次上传多个文件 下拉菜单标签
标签select嵌套optionselect标签是下拉菜单整体option是下拉菜单的每一项 其中selected属性是用于选定默认选择哪一项 文本域标签
作用多行输入文本的表单控件
标签textarea label标签
作用增大点击范围 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typeradio idman namegenderlabel forman男/labellabelinput typeradio namegender女/label
/body
/html button标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actioninput typetext placeholder请输入你的内容brbrinput typepassword placeholder请输入密码brbutton typebutton普通按钮/buttonbutton typereset重置/buttonbutton typesubmit提交/button/form/body
/html 无语义的布局标签
div标签
它是独占一行的
span标签
它是不换行的 字符实体
概念上类似语言中的转义字符
