web网页设计前端 HTML

在线帮助文档

离线帮助文档下载微信公众号：日常分享菌

- 前述
- 语法规范
- 标签的关系
- 注释
1. 文档类型声明标签
2. lang语言 charset字符集
3. 基本结构标签
4. 标题标签(双标签)
5. 段落标签(双标签)
6. 换行标签(单标签)
7. 文本格式化标签(双标签)
8. 盒子标签(双标签)
9. 图像标签(单标签)和路径
10.超链接标签(双标签)
11.表格标签(双标签)
12.列表标签(双标签)
13.表单标签(双标签)

# 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定义语言为中文

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页面中的图像

标签	属性值	说明
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.表单标签(双标签)

用来收集用户信息