一些常用的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'/>
特殊字符
有些特殊的字符无法直接显示在页面上,我们要通过转义的方式来显示
比如:
< <
> >
空格
& &
还有许多特殊符号,大家在用的时候可以去查询
列表标签
定义列表
<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>
:列表具体内容
- 123
- 123
- 123
- 123
代码:
<ol>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
- 123
- 123
- 123
- 123
代码:
<ol type="a">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
- 123
- 123
- 123
- 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>
<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=""/>