【HTML】HTML常用标签

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cflys/article/details/53055103

一些常用的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'/>

特殊字符

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

列表标签

定义列表

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

1
1.1
1.2
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>:列表具体内容

  1. 123
  2. 123
  3. 123
  4. 123

代码:

<ol>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
  1. 123
  2. 123
  3. 123
  4. 123

代码:


<ol type="a">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
  1. 123
  2. 123
  3. 123
  4. 123

代码:


<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没有限制

  1. 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=""/>

展开阅读全文

没有更多推荐了,返回首页