html常用标签、认识浏览器

嘿0v0

已于 2022-04-16 22:31:16 修改

阅读量442

点赞数

分类专栏：前端文章标签：前端

于 2022-04-08 22:36:58 首次发布

本文链接：https://blog.csdn.net/ordinaryzry/article/details/124002072

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

表格（ table tr th td 标签）

表单（ form input select textarea 标签）

浏览器

1、浏览器简介

2、常用的浏览器

HTML常用标签

标题标签（ h1 - h6 标签）
- ```
<h1>内容</h1>
<h2>内容</h2>
<h3>内容</h3>
<h4>内容</h4>
<h5>内容</h5>
<h6>内容</h6>
```
- 分别表示一级标题到六级标题
- 字号逐级递减（字号可以通过CSS修改，默认字号下部分标题字号小于正文字号）
段落标签（ p 标签）
- ```
<p>内容</p>
```
- 段落代码间自动换行
- 段落内容自动去空格、空行（多个连续空格、空行=一个空格）
段内换行标签（ br 标签）
- ```
<br/>
```
- 单独标签、直接结束（有几个换几行）
空格字符（   ）
- ```
&nbsp;
```
- 特殊字符全小写
- 有几个就有几个空格
预留格式标签（ pre 标签）
- ```
<pre>内容</pre>
```
- 所有内容保留原格式显示
行内组合（ span 标签）
- ```
<span>内容</span>
```
- 组合行内元素，再通过CSS样式进行单独格式化
水平线（ hr 标签）【单独标签】
- ```
<hr/>
```
- 默认从网页左端横向跨越至网页右端
注释
- ```

```
- 可跨行添加
超链接标签（ a 标签）
- 用于：文字超链接、图片超链接、导航栏
- ```
<a href="网址">文字或图片</a>
```
- 若不分段，则会在一行显示
- 网址格式：
  - 本站点其他网页例:news.html
  - 其他站点例:http://www.baidu.com 【http://不能忘】
  - 虚拟超链接 # （会出现超链接效果，但不会跳转到其他网页）
图片标签（ img 标签）
- ```
<img src="……" alt="……" />
```
  - src属性：完整路径+文件名
    - 相对路径：以该文档所在位置为基准 e.g. ../image.jpg ..表示上一级文件夹
    - 绝对路径：以根目录为基准，直到找到图片【只能在特定位置下找到，不具有灵活性】
区域标签（ div 标签）
- 区域：单独的一个组成部分。
- 优点：区域改动时，只需要对区域进行改动，不需要改变区域内的内容。可结合CSS样式对每个区域进行单独的排版设计。
- ```
<div 区域属性>…</div>
```
*角标标签（ sup 标签）
- ```
<sup>…</sup>
```
列表
- 无序列表（ ul li 标签）
  - ```
  <ul><li>…</li></ul>
```
- 【 ul 标签：无序列表； li 标签：列表项】
- 有序列表（ ol li 标签）
  - ```
  <ol><li>…</li></ol>
```
- 【 ol 标签：有序列表； li 标签：列表项】
- 与无序列表的区别：每个列表项前都会出现一个标号【可通过CSS进行设置】
表格（ table tr th td 标签）
- ```
<table>
    <tr> <th>…</th> </tr>
    <tr> <td>…</td> </tr>
</table>
```
- 【 table 标签表示表格的范围； tr 标签表示表格的一行； th 标签表示表头单元格，使其加粗显示； td 标签表示表格的一个单元格】
- 此时的表格显示是没有边框的，表格边框的样式要在CSS代码中进行设置。
- 也可通过设置表格的 border 属性设置边框的宽度【表格的边框+单元格的边框=>两层边框】

表单（ form input select textarea 标签）

表单
- 用于采集用户信息的一个区域；表单元素：包含文本框、按钮、单选、复选、下拉列表、文本域。
- 表单<form>标签【 action 属性表示收集来的属性交由哪个 web 系统后端的页面来进行处理】
- ```
<form action="数据处理网页">
    表单内容
</form>
```
组成文本框和密码框的标签（ input 标签）
- 【密码框中的所有文本是由 * 来进行显示的】
- ```
<form>
    <input type="text/password" />
</form>
```

提交按钮（ input-submit）

【 value 属性规定提交按钮表面的文字】

<form>
    姓名：
    <input type="text" />
    <input type="submit" value="提交" />
</form>

重置按钮（input-reset）

<form>
    姓名：
    <input type="text" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>

单选框、复选框（input-radio/checkbox）

【 value 属性表示提交的数据； name 属性表示当前这一项的名字叫什么，同一个选择下的 name 属性设置相同； checked 属性表示当前这一项是否被默认选择】

<form>
    性别：
    <input type="radio" value="boy" name="gender" checked="checked" /> 男
    <input type="radio" value="girl" name="gender" /> 女
    <br/>
    爱好:
    <input type="checkbox" value="1" name="music" /> 音乐
    <input type="checkbox" value="2" name="sport" /> 运动
    <input type="checkbox" value="3" name="reading" /> 阅读
</form>

下拉列表框（select 标签、option 标签）

<select>
    <option selected="selected">选项1</option>
    <option>选项2</option>
</select>

文本域（ textarea 标签）

【 rows 属性表示行数； cols 属性表示列数】

<form>
    <textarea cols="50" rows="10">
        在这里输入内容…
    </textarea>
    <br/>
    <input type="submit" value="确定" />
    <input type="reset" value="重置" />
</form>