HTML 基础知识详解与代码示例

求学者1.0

于 2024-09-05 21:31:46 发布

阅读量1.7k

点赞数 29

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_63556308/article/details/141941289

版权

一、基本格式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>中文测试。。。。</title>
</head>
<body>
    这里是测试 body 测试内容。。。
</body>
</html>

二、标签

在body内的主要标签有：
- <h1>到<h6>：双标签，标题，加粗且换行，数字越大标题越小。
  - 示例：<h1>这是一级标题</h1><h6>这是六级标题</h6>。
- <p>：双标签，段落，有换行功效。
  - 示例：<p>这是一个段落。</p>。
- <hr>：单标签，左到右分割符。
  - 示例：<hr>。
- 注释使用。
  - 示例：。

三、元素的属性

大部分元素属性语法为<标签属性1=参数1 属性2=参数2>。
- align属性可设置为left、right、center，用于对齐元素。
  - 示例：<p align="center">这是居中的段落。</p>。
- bgcolor是body的属性，可设置网页的背景色，如<body bgcolor="0xff1234">。

四、文本元素属性

<b>：内容加粗。
- 示例：<b>这是加粗的文字。</b>。
<br>：换行，如果在<p>标签中间有间隔。
- 示例：<p>第一行<br>第二行</p>。
<i>：字体倾斜。
- 示例：<i>这是倾斜的文字。</i>。
<del>：删除文字。
- 示例：<del>这是被删除的文字。</del>。
<strong>：强调一段文字，效果类似<b>标签。
- 示例：<strong>这是强调的文字。</strong>。
<u>：下划线。
- 示例：<u>这是有下划线的文字。</u>。
<small>：超小字体。
- 示例：<small>这是超小字体的文字。</small>。
<sub>：下标，如h<sub>2</sub>0。
- 示例：<p>h<sub>2</sub>O</p>。
<sup>：上标，如100m<sup>2</sup>。
- 示例：<p>100m<sup>2</sup></p>。
<ruby>：用于标注拼音，可能部分浏览器不支持，如<ruby>二姐 <rt>(er) (jie)<rt></ruby>。
- 示例：<ruby>二姐 <rt>(er) (jie)<rt></ruby>。
<mark>：加黄色背景。
- 示例：<mark>这是被标记的文字。</mark>。

五、超链接

有五种形式：

链接外部网站：<a href="http://www.baidu.com">baidu</a>。
链接本地文件：<a href="1.html">1111</a>。
图片链接：<a href="1.html"><img src="abc.jpg"></a>。
电子邮件链接打开电子邮件：<a href="mailto:123@13.com">contract me</a>。
下载文件链接：<a href="abc.jpg">下载</a>。

默认情况下打开新网页时老网页会关闭，可使用target属性控制打开方式：

_self：在当前位置打开，默认值。
- 示例：<a href="http://www.example.com" target="_self">在当前窗口打开示例网站</a>。
_blank：在新窗口中打开，如<a href="http://www.baidu.com" target="_blank">baidu</a>。

六、`img`标签

单标签，属性有：

src：图像来源。
- 示例：<img src="image.jpg" alt="示例图片">。
alt：如果不能正确打开，显示的文字。
- 示例：<img src="image.jpg" alt="这是一张美丽的图片">。
width和height：可以设置为具体像素值或百分比，百分比是相对于网页而言的，但高度百分比可能无效，如<img src="abc.jpg" alt="美女" width="100" height="200">或<img src="abc.jpg" alt="美女" width="50%" height="200%">。

七、列表

无序列表：前面无数字，使用<ul>标签，如<ul><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ul>，有type属性可设置文字最前面的符号，包括disc（黑色实心圆）、circle（白色空心圆）、square（黑色方块）。
- 示例：<ul type="disc"><li>项目 1</li><li>项目 2</li></ul>。
- 示例：<ul type="circle"><li>项目 1</li><li>项目 2</li></ul>。
- 示例：<ul type="square"><li>项目 1</li><li>项目 2</li></ul>。
有序列表：前面有数字，使用<ol>标签，如<ol><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ol>，有type属性可设置排序使用的数字，还可以使用start属性设置开始值，后面的数字依次递增。列表中可以放文字、图片或链接。
- 示例：<ol type="1"><li>第一项</li><li>第二项</li></ol>。
- 示例：<ol type="a"><li>第一项</li><li>第二项</li></ol>。
- 示例：<ol start="5"><li>从 5 开始的项</li><li>下一项</li></ol>。

八、表格

表格构成：
- <table>：外框。
- <tr>：行。
- <td>：列。
- 例如：<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>，表示 3 行 3 列。
表格属性：
- border：边框粗细。
  - 示例：<table border="1"><tr><td>有边框的表格单元格</td></tr></table>。
- <th>是<tr>的属性，代表列标题，自动居中且加粗。
  - 示例：<table><tr><th>列标题</th></tr><tr><td>表格内容</td></tr></table>。
- colspan：横向合并单元格，需要整数参数。例如：<tr><th colspan="3">name</th></tr>。
  - 示例：<table><tr><th colspan="2">合并两列的标题</th></tr><tr><td>内容 1</td><td>内容 2</td></tr></table>。
- rowspan：列项合并，整数参数。
  - 示例：<table><tr><td rowspan="2">合并两行的内容</td><td>其他内容</td></tr><tr><td>更多内容</td></tr></table>。

九、HTML 实体

用于输出一些特殊的字符，因为有些特殊字符不能直接在网页中显示。

示例：<p><这是小于号实体></p>。

十、表单

用于传递参数和数据，使用<form>标签。重要的子元素有input和button。属性有：

action：指定表单发送的地址。
- 示例：<form action="submit.php">...</form>。
method：发送的方式，有get（数据会附加到 url 的后面传递给服务器，默认）和post（将数据包大包发给服务器，等候服务器来读取）。
- 示例：<form method="post">...</form>。

input元素：
- 是表单中的内容项，比如输入内容的文本框，可以指定表单属性，也可以放在表单的外面。
- 属性包括：
  - type：指定输入框的类型，如text（单行文本）、password（密码）、submit（提交按钮）、reset（重置按键）、button（普通按键，需要和特定事件关联）、image（图片式按键）、hidden（隐藏字段，内容不显示在页面上，用于提交其他变量）、email（邮箱类型，新特性，可能支持有差异）。
    - 示例：<input type="text" name="username" placeholder="输入用户名">。
    - 示例：<input type="password" name="password">。
    - 示例：<input type="submit" value="提交">。
    - 示例：<input type="reset" value="重置">。
    - 示例：<input type="button" onclick="alert('这是一个普通按钮')">。
    - 示例：<input type="image" src="submit.png">。
    - 示例：<input type="hidden" name="hidden_value" value="秘密数据">。
    - 示例：<input type="email" name="email" placeholder="输入邮箱地址">。
  - name：名称，输入内容识别名称，传递参数时候的参数名称。
  - value：默认值，输入框默认填入的内容。
    - 示例：<input type="text" name="description" value="默认描述">。
  - maxlength：指定最大长度。
    - 示例：<input type="text" name="short_text" maxlength="10">。
  - placeholder：设置提示信息。
    - 示例：<input type="text" placeholder="请输入内容">。
  - required：表示内容必须填写，不然不能提交。
    - 示例：<input type="text" name="required_field" required>。