HTML 学习小结

APythonC

于 2021-12-11 21:42:43 发布

阅读量804

点赞数 3

分类专栏：开发前端文章标签： html css3 前端

本文链接：https://blog.csdn.net/APythonC/article/details/121879858

版权

开发同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

20 篇文章 0 订阅

订阅专栏

HTML 学习小结

一、基本概念

1. 网页

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为HTML 文件

2. HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它是用来描述网页的一种语言
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
超文本有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

3. Web结构的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior) 三个方面

结构：HTML
表现：CSS
行为：JavaScript

二、常用简单 HTML 标签

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，我们称之为根标签
`<head></head>`	文档头部	注意在 head 标签中我们必须要设置的标签是 title
`<title></title>`	文档标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档主体	元素包含页面所有的内容，页面内容基本都是放到 body 里面的
`<h1> - <h6>`	标题	加了标题的文字会变粗，独占一行，并且依据重要性h1 - h6递减
`<p></p>`	段落	将文档分割为若干段落，段落之间保有空隙，并且会跟随浏览器窗口大小自动换行
`<br />`	换行	强制换行，是一个单标签，段落标签会插入一些垂直的间距，而换行标签不会
`<strong></strong>`或者`<b></b>`	加粗	加粗字体，更推荐 strong
`<em></em>`或者`<i></i>`	倾斜	倾斜字体，更推荐 em
`<del></del>`或者`<s></s>`	删除线	字体加上删除线，更推荐 del
`<ins></ins>`或者`<u></u>`	下划线	字体加上下划线，更推荐 ins
`<div></div>`	大盒子	division，表示分割、分区，一行只能放一个
`<span></span>`	小盒子	表示跨度、跨距，一行上可以放多个

三、复杂 HTML 标签

1. 图像标签

<img src="图像URL" />

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名

图像标签的其他属性如下：
在这里插入图片描述
src 引入的相对路径和绝对路径要区分：

相对路径：图片相对于 HTML 页面的位置
在这里插入图片描述
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如：D:\web\img\logo.gif 或完整的网络地址 http://www.itcast.cn/images/logo.gif

2. 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性作用如下：
在这里插入图片描述
链接分类：

外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a >
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接: 点击链接,可以快速定位到页面中的某个位置
- 在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a>
- 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如<h3 id="two"> 第2集 </h3>

3. 表格标签

<table>
 <tr>
     <th>单元格内的文字</th>
 	 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

<table> </table> 是用于定义表格的标签
<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中
<th> </th>标签表示 HTML 表格的表头部分(table head 的缩写)，表头单元格内的文字会加粗居中显示
<td> </td> 用于定义表格中的单元格(table data 的缩写)，必须嵌套在<tr></tr>标签中

表格属性（不常用）如下：
在这里插入图片描述
表格结构标签如下：

<thead></thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体
以上标签都是放在 <table></table> 标签中

合并表格单元格的方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

4. 列表标签

无序列表：以项目符号呈现列表项
```
<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>
```
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
- <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的
- <li> 与 </li> 之间相当于一个容器，可以容纳所有元素
有序列表：列表排序以数字来显示
```
<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>
```
- <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
- <li> 与 </li>之间相当于一个容器，可以容纳所有元素
自定义列表：列表项前没有任何项目符号
```
<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>
```
- <dl></dl> 里面只能包含<dt> 和 <dd>
- <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>

5.表单标签

表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递，<form> 会把它范围内的表单元素信息提交给服务器

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

常用属性：

表单控件：

input 输入表单元素：用于收集用户信息
```
<input type="属性值" />
```
根据不同的 type 属性值，输入字段拥有很多种形式，type 属性值如下：

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用
- name 表单元素的名字, 要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用

此外，还有 <label>标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

select 下拉表单元素：定义下拉列表
```
<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>
```
- <select> 中至少包含一对<option> 。
- 在<option>中定义 selected ="selected" 时，当前项即为默认选中项
textarea 文本域元素：定义多行文本输入
```
<textarea rows="3" cols="20">
 文本内容
</textarea>
```
cols=“每行中的字符数”，rows=“显示的行数”

四、注释方式和特殊字符

1. 注释方式

<!-- 注释语句 -->  

快捷方式： ctrl + /

2.特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8D5Vucw-1639229448891)(C:\Users\程玉峰\AppData\Roaming\Typora\typora-user-images\image-20211208213514300.png)]$
重点记住：空格、大于号、小于号

五、查阅文档

W3C : http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/
菜鸟教程：https://www.runoob.com/html/html-tutorial.html

APythonC

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
HTML 学习小结

HTML 学习小结一、基本概念1. 网页网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件2. HTMLHTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)超文本有 2 层含义：
复制链接

扫一扫