【HTML】HTML常用标签

最新推荐文章于 2024-05-12 02:57:44 发布

cflys

最新推荐文章于 2024-05-12 02:57:44 发布

阅读量1.6k

点赞数 20

文章标签： html 标签

本文链接：https://blog.csdn.net/cflys/article/details/53055103

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一些常用的HTML标签

文字标签和注释标签

文字标签 `<font>` `</font>`

属性：
1. size：文字的大小
取值范围（1~7），如果 >7 依然显示 7 大小的字
2. color：文字的颜色
两种表示方式
1. 英文单词：red green blue white ······
2. 使用RGB：用6位十六进制表示 #ff ff ff 没两个表示一个颜色

注释标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
···
<h5>五级标签</h5>
<h6>六级标签</h6>

可以自动换行，h1 到 h6 字体的大小依次变小
实际效果

一级标签

二级标签

···

五级标签

六级标签

水平线标签 `<hr/>`

属性：
1. size：线的粗细
取值范围 1~7
2. color：线的颜色
例如：

<hr size=7 color='red'/>

特殊字符

有些特殊的字符无法直接显示在页面上，我们要通过转义的方式来显示
比如：
< <
> >
空格  
& &amp
还有许多特殊符号，大家在用的时候可以去查询

列表标签

定义列表

<dl></dl>: 表示列表的范围
<dl>里面
<dt></dt>：上层内容
<dd></dd>：下层内容

1.1

1.2

2.1

2.2

代码：

<dl>
    <dt>1</dt>
    <dd>1.1</dd>
    <dd>1.2</dd>
    <dt>2</dt>
    <dd>2.1</dd>
    <dd>2.2</dd>
</dl>

有序列表

<ol></ol>：表示列表的范围
属性：
1. type ：设置序号的格式
有1（默认），a，i

在<ol>里
<li>``</li>：列表具体内容

代码：

<ol>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>

代码：


<ol type="a">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>

代码：


<ol type="i">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>

无序列表

<ul> </ul>：列表的范围
属性：
1.type：无序列表的的格式
有空心圆circle 、实心圆disc（默认）、实心方块square、等等
在<ul>里面
<li>列表项<li>

实心圆（默认）

空心圆

实心方块

代码：

<ul><li>实心圆（默认）</li></ul>
<ul type="circle"><li>空心圆</li></ul>
<ul type="square"><li>实心方块</li></ul>

图像标签（重要）

<img src="图片的路径">
属性：
1. src：图片的路径
绝对路径
相对路径
2. weight：图片的宽度
3. height：图片的高度
4. alt：当鼠标移动到图片上显示的文本，图像未加载时显示的文本
有些浏览器没有效果

超链接标签（重要）

链接资源
<a href="链接的地址"></a>

属性：
1. href：链接资源的地址
2. target：设置打开的方式，默认为当前页打开
_blank：在一个新窗口打开
_self：在当前页打开（默认）

当超链接不需要到任何的地址，设置href=”#”即可

定位资源
如果想要定位资源：定义一个位置
<a name="top"></a>
回到这个位置
<a href="#top">回到TOP</a>

引入一个标签 pre：原样输出

public static void main(String[] args){
    System.out.println("Hello");
}

表格标签（重要）

：表格的范围在table里面：：行：单元格步骤： 1. 首先定义一个表格的范围用table 2. 定义一行使用tr 3. 定义一个单元格使用td 操作技巧： 1. 首先数有多少行 2. 在数每行有多少个单元格 3. 属性： 1. border：表格线的宽度 2. bordercolor：表格线的颜色 3. cellspacing：单元格的距离 4. weight：表格的宽度 5. height：表格的高度属性： 1. align：设置一行中文字在水平方向的对齐方式 2. valign：设置一行中文字在垂直方向上的对齐方式 center 居中 left 靠左 right 靠右属性： 1. colspan：可以设置跨多列的单元格 2. rowspan：可以设置跨多行的单元格设置表格标题行中单元格的文字格式默认为黑体居中可以视为一个单元格表格的标题表格的名字合并单元格

例子
第一行第一个	第一行第二个
第二行第一个	第二行第二个

代码：

<table>
    <caption>例子</caption>
    <tr>
        <td>第一行第一个</td>
        <td>第一行第二个</td>
    </tr>
    <tr>
        <td>第二行第一个</td>
        <td>第二行第二个</td> 
    </tr>
</table>

表单标签（最重要）

：表单的范围
属性：
1. action：提交的地址，默认为当前页面
2. method：表单的提交方式
常用的2种：
get：（默认）
post：
get和post的区别：
1. get请求地址栏会携带提交的数据，post不会带（在请求体里）
2. get请求的安全级别较低，post较高
3. get请求数据大小的限制，post没有限制

enctype（不常用）：文件上传时需要

输入项：可以输入内容或者选择内容的部分
大部分的输入项可以用<input>实现
1. 普通输入项：<input type="text"/>
2. 密码输入项：<input type="password"/>
3. 单选输入项：<input type="radio"/>
在里面需要属性 name
name 的值必须一样
必须有个value值（提交时区别选项）
实现默认选中的属性：checkd="checked"
4. 复选输入项：<input type="checkbox"/>
必须有 name属性
name 属性必须相同
必须有个value值
实现默认选中的属性：checkd="checked"
5. 文件输入项：<input type="file"/>（文件上传）
6. 下拉输入项（不是在input标签中）：

<select name="名字">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

在option中实现默认选中属性：selected="selected"
7. 文本域：<textarea></textarea>
属性：
1. cols：列数
2. rows：行数
8. 隐藏项（不会显示在页面上，但是存在于html代码里）：
<input type="hidden'/>
9. 提交按钮：<input type="submit" value="按钮的名字"/>
10. 使用图片提交：<input type="image" src="图片的路径"/>
11. 重置按钮：回到输入项的初始状态 <input type="reset" value="按钮的名字"/>
12. 普通按钮：<input type="button" value=""/>