HTML超文本标记语言
W3C万维网联盟
W3C标准包括:
-
结构化标准语言(HTML,XML)
-
表现标准语言(CSS)
-
行为标准(DOM,ECMAScropt)
网页基本信息
使用<!--注释内容--> 进行注释
!DOCTYPE告诉浏览器我们要使用什么规范
< head> 标签代表网页头部
-
< title>网站标题
-
< meta>用来描述我们网站的一些信息
< body>标签代表网页主体
最后都要用< /xxxx>闭合
网页基本标签
-
标题标签
-
h1一级标签,以此类推
-
-
段落标签
-
< p>分段
-
-
换行标签
-
< br/>(写在后面)不用开头写东西,自闭和标签
-
换行其实还是一段,比段落的间距要小
-
-
水平线标签
-
< hr/>自闭和标签
-
-
字体样式标签
-
粗体< strong>
-
斜体< em>
-
-
特殊符号
-
空格:& nbsp; 在代码中用正常空格无论用多少个都在网页上只显示一个
-
大于& gt;
-
小于& lt;
-
书名号& copy;
-
-
图像标签
-
相对路径:通过 .. 代表当前文件位置上一级目录
-
绝对路径:从盘开始
-
< img src="图片路径" alt="图片加载失败的代替文字" title="悬停文字(鼠标放在图片上显示的文字)" width=“宽度” height="高度">
-
-
连接标签
-
< a href="路径" target="目标窗口位置">该链接的内容,可以是文字也可以是图片< /a>
-
目标窗口位置常用_blank在新标签打开 _self该页面打开
-
锚标签
-
需要一个锚标记< a name="top">顶部< /a> (使用name作为标记)
-
href内容改为#标记
-
-
-
列表标签,内部用< li>
-
有序列表:< ol>
-
无序列表:< ul>
-
自定义列表:< dl>
-
< dt>标题
-
< dd>内容
-
-
-
表格标签< table>
-
行< tr> 列< td>
-
跨列 在td后面加上colspan="跨的列数"
-
跨行 在tr后面加上rowspan="跨的行数"
-
-
视频< video>后面加上controls有控制页面 autoplay自动播放
-
音频< audio>
页面结构分析
-
header标题头部区域的内容
-
footer标记脚步区域的内容
-
section:Web页面中的一块独立区域
-
article独立的文章内容
-
aside相关内容或应用(常用于侧边栏)
-
nav导航类辅助内容
iframe内联框架
使用这个标签可以嵌套页面
表单< form>
< form action="表单提交的位置,可以是网站也可以是请求" method="post/get两种方法">
get/post:
-
get方式可以在url中看到提交的信息,不安全但是效率高
-
post方式看不到
表单元素格式:
-
type
-
name指定表单元素的名称
-
value元素的初始值,type为radio时必须指定一个值
-
size表单初始宽度
-
maxlength:类型为text或password时,输入的最大字符数
-
checked:类型为radio或checkbox时,指定按钮是否被选中
-
readonly只读
-
disabled禁用
内容用< p >
input type = "text" name="username"会生成一个text框(还有password框),输入的内容命名为username
input type:(默认text)
-
text
-
password
-
submit提交
-
reset重置
-
checkbox单选
-
radio多选
-
file
-
hidden
-
image
-
button
-
email邮箱验证
-
url验证
-
number 数字,可以加数减数还可以设置上限
-
range滑块
-
search搜索
下面不用input:
< p>中用< select>生成下拉框,用< option>设置内容,selected可以将该内容设置为默认
< p>中用textarea生成文本域 cols设置列,rows设置行
label可以打开某个框,增强鼠标可用性
表单初级验证
常用方法:
-
placeholder 告诉用户要输入什么
-
required非空判断
-
pattern正则表达式判断