HTML 基础知识笔记（一）

叱咤少帅（少帅）

已于 2023-10-21 16:37:31 修改

阅读量468

点赞数

分类专栏： # CSS & HTML 文章标签： html 笔记前端

于 2020-10-14 09:59:11 首次发布

本文链接：https://blog.csdn.net/knight_zhou/article/details/109066489

版权

CSS & HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本元素，包括行内元素、块级元素、图像、链接、元数据、CSS样式应用方式以及表格、列表、区块元素的使用。此外，还涵盖了HTML表单组件如单选按钮、复选框和下拉列表，以及框架和JavaScript脚本的简单应用。内容深入浅出，适合初学者了解网页构建的基础知识。

摘要由CSDN通过智能技术生成

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

HTML元素有哪几类了？

1. 行内元素（span、em...）
2. 块级元素（div、p...）

元素的相对定位是根据自己来的，比如 div是块状元素，使用 margin-left 会胀大自己。

按绝对定位是相对整个页面来的，这样就脱离了元素。

（1）图像标签 <img>

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息

<img src="/images/logo.png" width="258" height="39" alt="xx" />

(2) 水平线 <hr>

(3) 换行符 <br>

(4) 链接

4-1：新窗口打开链接

<a href="https://www.baidu.com/" target="_blank">叱咤少帅</a>

4-2：图像链接

<a href="http://www.baidu.com/"><img src="URL" alt="替换文本"></a>

4-3: 邮件链接

<a href="mailto:knight@qq.com">发送e-mail</a>

(5) <meta> 元素

meta标签描述了一些基本的元数据，META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

(6）使用CSS的三种方式

6.1 内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

6.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。

<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>

6.3 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

(7) HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义)，其中字母td表示 table data的意思。表头由标签<th>定义，字母意思为table header的意思。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

tr 是“tablerow（表格行）”的缩写，用于表bai示一行的开始和结束。

td 是“tabledata（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。

（8）列表定义

8.1 无序列表

<ul>
<li>咖啡</li>
<li>牛奶</li>
</ul>

8.2 有序列表

<ol>
<li>咖啡</li>
<li>牛奶</li>
</ol>

8.3 HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>咖啡</dt>
<dd>- 黑色的热咖啡</dd>
<dt>牛奶</dt>
<dd>- 白色的冷饮</dd>
</dl>

（9）区块元素

9.1 <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器

9.2 <span> 元素是内联元素，可用作文本的容器，本身没有特定含义

(10) 网站布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

（11）HTML表单

11-1：单选按钮

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

11-2：复选按钮

<form action="">
<input type="checkbox" name="vehicle" value="Bike">我有一辆单车
<br>
<input type="checkbox" name="vehicle" value="Car">我有一辆汽车 
</form>

11-3: 下拉列表

<form action="">
<select name="cars">
<option value="volvo">沃尔沃</option>
<option value="fiat">菲亚特</option>
<option value="audi">奥迪</option>
</select>
</form>

11-4: 文本域

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

(12) HTML 框架

通过使用框架，你可以在一个html页面加载另外的html页面。相当于你打开了一个html页面的时候，可以显示两个html页面的内容。

其中： frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框。

   <iframe src="test.html" frameborder="0" width="200" height="200"></iframe>
    <p> 这是首页，加载了其他页面</p>

使用iframe来显示目标链接页面：

   <iframe src="test.html"  name="xx"></iframe> 
   <p><a href="https://ip138.com" target="xx">这是显示ip地址</a></p>

(13) <script> 标签

用于定义客户端脚本，比如 JavaScript，<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。下面的脚本会向浏览器输出"Hello World!"。

<script>
document.write("Hello World!")
</script>

（14）常用的字符实体

常用的字符实体
显示结果	描述	实体名称
	空格
<	小于号	<

(15) 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）