HTML5
背景
1.HTML是一系列网页技术的总称,包含了HTML+CSS+JavaScript。
2.HTML5是HTML的第五个版本。
3.超文本标记语言,由一套标记标签组成。
4.XHTML是可扩展文本标记语言。
5.网页的组成:结构(html xhtml,xml)、表现(css)、行为(js)。结构和表现用W3C标准,行为用ECMA标准。
6.一个项目组成:产品经理,UI,前端,后台,测试。
使用
vs code
扩展包
下载
结构快捷键
!+enter
html:5+enter
运行:右键-open in default browser
注释:ctrl+/
单标签<>
如 meta br
双标签<> </>
如:body title html
属性
对标签起到一定加强的作用,跟标签之间用空格间隔
属性值
• 等号之后的叫属性值
其他快捷键
标签{$}*数字
• 自动生成数字个标签
• 也可以不加{$},其中$的个数代表数字位数
常用标签
换行
<br> 单标签
空格
 ;一个space键空格大小
&emsp;一个中文大小空格
&ensp;半个中文大小空格
space
不可重复
可重复
标题
<h1> </h1> <h2> </h2><h3></h3> <h4> </h4> <h5> </h5><h6></h6>
h1文章或重点标题
h2大模块
h3小模块
h1到h6逐级减小
双标签,独自占据一行,可以加粗字体,有一定的行高
段落
<p></p>
双标签,独自占据一行,有一定的行高
加粗
<b></b>
<strong></strong>
双标签,不能独自占据一行,可以加粗文本
倾斜
<i></i>
<em></em>
双标签,不能独自占据一行,可以倾斜文本
删除线
<del></del>
<s></s>
双标签,不能独自占据一行,可以在文本中间加一条删除线
上下标
<sup></sup>上标
<sub></sub>下标
双标签,不能独自占据一行,给文本加上下标
特殊符号
版权符号©;
商标符号®;
特殊符号只是浏览器内核在处理的过程中该有的特殊字符来处理,空格也是特殊符号
分割线
<hr>
width 设置分隔线的宽度【注意不能通过属性height设置高度】
color:设置分隔线的高度
单标签,独自占据一行,自动水平居中
超链接
<a href="想要跳转的链接" target="打开新网页的方式" title="鼠标悬停时显示的内容">
双标签,不能独自占据一行,有默认的颜色,文字下方有下划线
target="_self[默认在自身打开]/_blank[在新的界面打开]"
在head中用base标签进行统一设置,需要单独设置的地方单独设置,详细的代码参考如下:<base target=“_blank”>
ref属性值为空时,点击后刷新页面
关于超链接的延申之锚点定位
应用场景:参考京东最右侧部分
解决方案:<a href="#想要跳转地方的id值">描述内容</a>
图片
<img src="图片的路径">
路径
绝对路径
• 绝对路径:直接复制电脑的路径/使用图片的网址【绝对路径可以使用“\”或“/”字符作为目录的分隔字
相对路径
• 同级
• 接用图片的名称或者./图片的名称
• 下级
• 找到电脑路径下图片和html文件不同的部分,src的值为不同的部分
• 上级
• ../往上一级查找,知道找到html文件和图片所在的文件夹在同一文件夹时,然后找到电脑路径下图片和html上级文件不同的部分,src的值为不同部分的值,不要忘记../(一个“../”就是一级,上两级就是“../../”)
属性
width:设置图片的宽度
height:设置图片的高度【一般不会同时设置图片的宽度和高度,容易让图片失帧】
title:设置鼠标悬停时显示的内容
alt:图片走丢之后的提示信息
border:图片的边框
图片超链接:<a href=""><img src=""></a>
居中
居中标签:<center></center> 可以让标签内的内容居中显示,独自占据一行
行内元素
语法:<span>描述内容</span>
结合css
块
语法:<div>描述性内容</div>
划分页面区域
列表
有序列表
<ol>
<li></li>
</ol>
属性
• type,序号类型,可以是:1,A,a,i,I
• start,开始值,数字
无序列表
<ul>
<li></li>
</ul>
type,表示列表前的图标,如none,
可以用来做列表或导航栏
自定义列表
<dl>
<dt>
<dd></dd>
</dt>
</dl>
dt只能有一个,dd可以有多个
表单
功能:用来收集用户信息
应用场景:登录注册搜索等
组成:包括表单域+表单控件(表单元素)+提示信息
语法
<form action="提交的路径" method="表单提交的方式">
• 表单域:说明表单的区域
请输入你的姓名:
• 提示信息
<input type="相对应的类型">
• 表单控件【表单元素】
</form>
表单属性之get和post
• a. get是从服务器上获取数据,post是向服务器传送数据。
• b. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
• c. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
• d. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB
• e. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
控件
a.文本框:<input type="text">
b.密码框:<input type="password">
d.单选框
• <input type="radio" name="属性值相等">单选项1
• <input type="radio" name="属性值相等">单选项2
• ...
• 补充:在使用单选框的时候注意后面name属性值必须相等,以此达到互斥的效果
e.复选框:
• <input type="checkbox">复选项1
• <input type="checkbox">复选项2
• <input type="checkbox">复选项3
• ...
c.按钮
• 普通按钮:<input type="button" value="按钮显示的内容">
• 提交按钮:<input type="submit">默认的value值为提交
• 重置按钮:<input type="reset">默认的value值为重置
• 图片按钮:<input type="image" src="显示的图片的路径">
• 知识点补充:后期大家在写代码的过程中还会经常遇到一种提交按钮书写方式:<button>按钮显示的内容</button>
f.下拉列表
• <select>
• <option></option>
• ...
• </select>
• 知识点补充:
• <optgroup></optgroup> 对于option的内容进行分组
• 应用:
• <select>
• <optgroup lable="相对应的值">
• <option></option>
• ...
• </optgroup>
• </select>
g.文本域
• <textarea cols="一行中的字节数" rows="可以显示出来的行数"></textarea>
label
• <label for="对应点击之后想要让他获取焦点的id属性值">点击的内容</label>
属性
placeholder:提示性信息
• 使用时,标签内不能有任何内容
value:默认值(初始值)
name属性:提交时可以把表单中的内容传递给服务器
checked:默认选中【经常使用在单选框和复选框中】
disabled:禁用表单
表格
语法:
<table>
<tr>
<td>描述内容1</td>
<td>描述内容2</td>
<td>描述内容3</td>
...
</tr>
<tr>
<td>描述内容1</td>
<td>描述内容2</td>
<td>描述内容3</td>
...
</tr>
...
</table>
如果tr table rows的缩写,代表表格的行;td代表表格的单元格,如果没有特殊情况注意所有的tr里面td个数应该一致
属性
table
• border 给table加边框
• cellspacing 去除边框与边框之间的间距【存在默认的间距】
• cellpadding 内容与边框之间的距离
• width/height 宽度/高度
• bordercolor 颜色
• align 设置表格的位置【left/right/center】
• bgcolor 设置表格的背景颜色
tr
• height 高度
• align 设置一行中文字的位置
• bgcolor 设置背景颜色
td
• width/height 宽度/高度
• align 设置单个单元格文本的位置
• bgcolor 设置背景颜色
• colspan 跨列成行
• rowspan 跨行成列
<caption></caption>表格的标题
<th></th>加粗居中的单元格