HTML基础学习笔记

清醒之眠

已于 2022-07-17 22:20:01 修改

阅读量177

点赞数

分类专栏：前端3件套文章标签： html 前端

于 2022-07-13 19:38:51 首次发布

本文链接：https://blog.csdn.net/qq_49982662/article/details/125771141

版权

前端3件套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML学习笔记

HTML 超文本标记语言: HyperText Markup Language

这份学习笔记的主要内容是HTML的基本内容
基于菜鸟教程的个人学习笔记
菜鸟教程

HTML页面的基本结构

一个HTML页面分为头和身体

头是，存放了页面的CSS样式和JS代码。
身体是，存放了HTML的各个标签
HTML很像之前用到过Springboot使用的maven文件和Android使用的layout.xml文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ykYlYgVB-1657712250574)(/home/ljx/.config/Typora/typora-user-images/image-20220712102423029.png)]

一些HTML的基本标签

HTML加粗 这是一段加强显示
HTML链接这是一个链接
HTML图像

HTML标签对大小写不敏感，无论是大写还是小写都可以识别，但为了可读性，尽量统一写法。

一些HTML的基本属性

class：元素的类名，对同类元素进行相同操作，这个部分通常配合CSS样式使用
id：元素的唯一标识，这个部分通常配合JS代码使用
style：元素样式，这个部分通常配合CSS样式使用

HTML的文本格式化

文本格式化指的是对文本添加效果，包括以下几种：

粗体
斜体
下划线
^上标
_下标
```
        空行和    空格
```
~~删除字~~
定义了一个代码块

HTML的超链接

超链接标签用****标识，等同于给某段文字或者某张图片增加单击事件。

a标签包括两个重要属性

href属性描述超链接的单击事件的重定向结果

target描述href的重定向结果在哪里显示

其中target属性包括四个取值：

_blank

浏览器打开一个新窗口，这是target属性的默认值

_self

浏览器在子窗口打开，不过这是在线编辑器的效果。实际的效果应该是覆盖原窗口。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hRuSoy7-1657712250575)(/home/ljx/.config/Typora/typora-user-images/image-20220712115710008.png)]

_parent

新窗口覆盖原窗口。

网上的解释是：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果
含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件

_top

新窗口覆盖原窗口。没发现和_parent有啥区别。

网上的解释是：在当前的整个浏览器窗口（此标签）中打开所链接的文档，因而会删除所有框架；

HTML超链接的默认样式

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
当单击事件的结果是某个链接时（大部分情况下都是这样），鼠标的箭头会变为手。

记住要将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

超链接的使用方法举例1：

用p标签包裹整个内容
用a标签包裹文字和图片
在a标签内部放入图片标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cD6YzfCs-1657712250576)(/home/ljx/.config/Typora/typora-user-images/image-20220712140758899.png)]

超链接的使用方法举例2：

href属性的意思是：跳转到id为C4的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHDdrcW9-1657712250576)(/home/ljx/.config/Typora/typora-user-images/image-20220712141046999.png)]

HTML头部标签

头部标签head中可以定义一些元素，其中：

base标签定义整个页面的基址地址，页面的剩余元素只用表述相对地址即可。
meta标签定义整个页面的元数据，也就是一些对HTML页面的描述（README.md）。搜索引擎会解析元数据，例如:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">

style标签定义整个页面的CSS样式，一般是外部引入
script标签定义整个页面的JS代码，一般是外部引入
title就不用介绍了，它显示浏览器标签页的内容
link标签通常是这样子的

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML文本标签

div标签
span标签

div标签是块级标签，span标签是行内元素。

块级元素>行内元素，不能在行内元素内放入块级元素。

<span>sadsad</span>
<span>sadsad</span>
<span>sadsad</span>
<span>sadsad</span>

<div>sadsad</div>
<div>sadsad</div>
<div>sadsad</div>
<div>sadsad</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liNr3tEN-1657712250577)(/home/ljx/.config/Typora/typora-user-images/image-20220712150823555.png)]

接下来还将继续见到div和span的对比

在头部使用CSS（内部使用CSS）

h1 {color:red;}
p {color:blue;}

引入外部CSS样式（外部使用CSS）

<link rel="stylesheet" type="text/css" href="styles.css">

这是最好的HTML+CSS搭配方式，因为方便管理

HTML图像标签

图像标签img包括以下几个常用属性：

src：图片地址
alt：图片加载错误事件
title：鼠标悬停事件
href：点击事件

HTML表格标签

<table border="2">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdGaquTM-1657712250577)(/home/ljx/.config/Typora/typora-user-images/image-20220712153344526.png)]

除了最常用的tr、td之外，还有以下几种可能会用到的标签：

th：表头（其实就是td加粗）。
caption：标题。
rowspan：跨行。
colspan：跨列。
cell padding：单元格边距。
cell spacing：单元格间距。

HTML列表标签

ul：无序列表 unordered list
ol：有序列表 ordered list
li：列表项

存在以下几种类型的有序列表：

数字编号列表
大小写字母编号列表
大小写罗马数字编号列表

正如有序列表，无序列表也存在以下几种类型：

圆圈编号列表
圆点编号列表
正方形编号列表

同时还有一种使用的不多的列表：自定义列表 dl

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6UQLpFf-1657712250577)(/home/ljx/.config/Typora/typora-user-images/image-20220712154628593.png)]

HTML元素分类

HTML存在两种元素分类：

块级元素（div）块级元素在浏览器显示时，通常会以新行来开始（和结束）。
行内元素（span）行内元素在显示时通常不会以新行开始。

通过块级元素和行内元素的组合，可以使用盒型构图的方法进行HTML页面开发。

内容在这里

主要的网页标题
菜单 HTML CSS JavaScript	内容在这里
版权 © runoob.com

上图可以以table标签实现，也可以通过div盒型构图方法实现。其实不难发现，上图的实质是一张表格。

HTML表格元素

表单是常见的前后端交互方式。这是一个常见的表单

Username:
Password:

表单还包括以下标签：

单选按钮（radio buttons）

<input type="radio" name="sex" value="male">Male<br>

多选按钮（checkboxes）

<input type="checkbox" name="vehicle" value="Bike">I have a bike

下拉列表（select）

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

文本域（textarea）

<textarea rows="10" cols="30" style="resize: none;">
我是一个文本框。
</textarea>

按钮（button）
datalist：一个很像select的标签

一个标准的表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10"><br>
<input type="submit" value="提交">
</fieldset>
</form>