HTML5部分
导读
- 浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
- web标准包括结构(html)、表现(css样式)和行为(交互,如javascript)三个方面
<!DOCTYPE html>
就是告诉浏览器使用哪种html版本来显示网页,这里是html5版本lang
定义网页显示的语言en
为英文,zh-CN
为中文,如果是en
,则谷歌会提示“是否翻译为中文”?charset
属性规定html文档用哪种字符编码
1. 路径的概念:
实际工作中,文件不能随便放,需要一个文件夹来管理
相对路径:就是相对于HTML页面的位置
同级路径: 下一级路径:/ 上一级路径:…/
绝对路径:从磁盘开始的路径:C:\USERS\Desktop**,也可以复制网页上的图片链接直接导入网页上的图片
2. 特殊符号代码
在HTML中一些符号需要用相对应字符才能表示,具体如下:
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 |   | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2 | ² |
³ | 立方3 | ³ |
3. 标签及属性介绍
- 标题标签
<h1></h1>
,标题文字加粗加大,且独占一行 - 段落标签
<p>paragraph</p>
- 换行标签
<br>
,这是一个单标签 - 加粗标签
<strong></strong>
或者<b></b>
,推荐用前者 - 倾斜标签
<em></em>
或者<i></i>
,推荐前者 - 删除线标签
<del></del>
或者<s></s>
,推荐用前者 - 下划线标签
<ins></ins>
或者<u></u>
,推荐前者 <div>
和<span>
标签是没有语义的,相当于一个盒子来装内容,一个<div>
标签独占一行;而一行可以显示多个<span>
<img>
标签用于定义html页面中的图像<img src=“图”/>
src
是img
标签的必须属性,用于指定图像文件的路径和文件名alt
是img
中的一个属性,表示图片显示不出来时替换为文字title
是img
的一个属性,鼠标放到图片上会出现提示文字width,height,border
都是img
的属性,以空格隔开,来设置图片的宽度、高度和边框宽度,宽和高只需设置一个即可等比缩放- 属性均采取键值对的格式,即
key=“value”
,属性=“属性值”
- 外部链接标签
<a href=”跳转目标” target=”目标窗口弹出方式”>文本或图像 </a>
,其中href
必须以http://
开头。_self
是当前窗口打开页面,_blank
是新窗口打开 - 内部链接:网页内部页面之间的相互链接
- 空链接
<a href=”#”> </a>
- 下载链接,链接地址需为.exe或.zip文件
- 锚点链接:直接跳转到当前页面中的某个位置:
<a href=”#id”>点我</a>;
可以跳转到相应id的位置 - 注释标签 ,快捷键crtl+/
- 表格标签:
<table>
爷爷,<tr>
爸爸,<td>
孙子 <th>加粗</th>
table
的属性有:align
,规定对其方式;border
,规定是否拥有边框;width
,规定表格宽度;cellpadding
规定单元格内文字与边框之间的距离;cellspacing
规定单元格之间的距离。thead
标签和tbody
标签用来定义表格的头部和尾部,是table
的子标签,thead
里必须包含tr
标签- 跨行合并
rowspan
,最上侧单元格为目标单元格 - 跨列合并
colspan
,最左侧单元格为目标单元格,删除多余格 - 无序列表
ul
里面的内容用li
定义,ul
中只能放li
标签,但li
标签里面可以放任何标签。有序列表ol
,(很少用) - 自定义列表标签
dl
,里面的大哥是dt
,小弟是dd
,dt
和dd
是并列关系,并不是包含关系,小弟追随大哥显示,dl
只能放dt
和dd
。一个dl
包括一个大dt
和多个小dd
。 - 表单由表单域
form
(总),表单空间和提示信息组成 form
的常用属性有action
(值为url
,用于指定接受数据的服务器url
地址),method
(值为get
或post
),name
- 表单控件:
input
输入表单元素,必要属性为type(button,checkbox,file,hidden,image,password,radio,reset,submit,text)
,其他常用属性name
(后台可以通过这个name
属性找到这个表单,单选按钮和复选框必须起相同的名字),value
(表单内默认显示的字以及定义返回给后台人员的内容),checked
(默认勾选内容),maxlength
表单中的提交标签submit
把form
表单中的所有表单元素里面的值提交给后台服务器,后台可以通过表单中的name
来区分表单内容 label
标签用于绑定一个表单元素,当点击label
标签内的文字时,浏览器会自动将焦点/光标转到或选择对应的表单元素上,语法:
<label for=”sex”>男</label>
<input type=”radio” name=”name” id=”sex”/>
label
与input
是并列标签,组合使用- 下拉选择标签
select
,字标签option
,option
中可以定义selected="selected"
表示默认选中 - 文本域标签
textarea
,属性有rows
显示多少行,cols
一行显示多少字,实际开发不会用,将通过css来设置。注意:textarea
标签要写到一行上,不然文本域默认会带有大片空白区域