离线帮助文档下载 微信公众号:日常分享菌
目录
# HTML
前述
HTML是一种超文本标记语言,是一种用来描述网页的一种语言。
HTML不是编程语言,是标记语言
语法规范
1. HTML标签是由尖括号包围的关键字,如 <html>
2. HTML标签通常是成对存在的,如 <html>和</html>,称之为双标签,第一个标签是开始标签,第二个是结束标签
3.存在特殊的标签是单标签,如<br/>
标签的关系
包含关系和并列关系
注释
<!–注释语句–>
1. 文档类型声明标签
< !DOCTPYE html> 告诉浏览器使用HTML5版本来显示网页
< !DOCTPYE html>必须位于文档的最前面的位置,处于<html>标签之前
2. lang语言 charset字符集
<html long=“zh-CN”>
用来定义当前文档显示的语言(此处定义为中文网站)
1. en定义语言为英文
2. zh-CN定义语言为中文
<meta charset=“UTF-8” />
charset属性用来规定HTML文档应使用“UTF-8”来编码
不写易引起乱码
3. 基本结构标签
4. 标题标签(双标签)
<h1>~<h6> 作为标题使用,依据重要性递减
使网页更有语义化,层次分明
- 加了标题标签的文字会被加粗,字号也会改变
- 一个标题独占一行
5. 段落标签(双标签)
<p>我是一个段落标签</p>
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保持有空隙
6. 换行标签(单标签)
<br/>: 强制换行
该标签只是简单的开始一行,和段落不一样,段落之间会插入一些垂直的间距
7. 文本格式化标签(双标签)
突出重要性,可为文字设置粗体,斜体,下划线效果
加粗: <strong> 加粗文本</strong>
倾斜: <em> 倾斜文本</em>
删划线: <del> 删除线文本</del>
下划线: <ins> 下划线文本文本</ins>
8. 盒子标签(双标签)
<div></div>和<span> </span>都是没有语义,用来装内容的
- <div>标签用来布局,一行只能放一个<div>.可理解为大盒子
- <span>标签用来布局,一行可以有多个<span>.可理解为小盒子
9. 图像标签(单标签)和路径
<img> 标签用于定义HTML页面中的图像
<img src=“图像URL”/>
标签 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性,用于指定图像文件的路径和文件名 |
alt | 文本 | 替换文本,图像不能显示时显示的文本 |
title | 文本 | 提示文本,鼠标放到图像上时显示的文本 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像边框的粗细 |
- 图像标签可以拥有多个属性,必须写在标签名的后边
- 属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开
相对路径:以引用文件所在位置为参考基础,同一级、下一级和上一级是图片相对于HTML页面的位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件和HTML文件在同一级,如<img src=“图像名.文件格式” /> | |
下一级路径 | ./ | 图像文件处于HTML文件的下一级,如<img src=“文件夹名/图像名.文件格式” /> |
上一级路径 | …/ | 图像文件夹处于HTML文件的上一级,如<img src="…/图像名.文件格式" /> |
绝对路径:目录下的位置,直接到达目标位置,通常是从盘符开始的路径,如 "D:\mycode\Web\MyWebsite\合照.gif" 或 "完整的网页地址"
10.超链接标签(双标签)
<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的URL地址,(必须属性)当为标签应用herf属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,_self 为默认值(在本窗口打开),_black 在新窗口打开 |
链接分类:
- 外部链接,必须以http://开头
如 :<a href=“http://www.baidu.com”>百度</a> - 内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可 如<a href=“index.html” />首页</a>
- 空连接:没有确定链接目标时,<a href="#">页面</a>
- 下载链接:如果href里面的地址是一个文件或压缩包,会下载这个文件,如文本,图像,表格,音频,视频
<a herf=“路径/文件名.文件格式” />下载文件</a> - 锚点链接链:点击连接后可快速定位到页面的特定位置
①在链接文本的href属性中,设置属性值为 #名字 的形式 如 <a href="#One" />点击跳转</a>
②找到目标位置标签,添加 id 属性等于刚设置的名字
如<h3 id=“One”>目标位置</h3>
11.表格标签(双标签)
<table>定义表格<\table>
<tr>定义表格中的行,必须嵌套在table标签中</tr>
<td>定义表格中的单元格,必须嵌套在tr标签标签中</td>
<th>表头标签</th>
位于表格的第一行或第一列,表头单元格里的文本内容加粗居中显示
表格结构标签
<thead>表格的头部区域,内部必须具有tr标签</thead>
<tbody>表格的主体区域</tbody>
合并单元格
跨行合并 rowspan=“合并单元格的个数”
最上侧单元格为目标单元格,合并代码写于此
跨列合并 colspan=“合并单元格的个数”
最左侧单元格为目标单元格,合并代码写于此
12.列表标签(双标签)
无序列表
有序列表
自定义列表
13.表单标签(双标签)
用来收集用户信息