HTML简单使用
标签 ： 前端技术
HTML
HTML(Hypertext Marked Language), 即超文本标记语言,能够独立于各种操作系统平台(如UNIX/Linux/Windows等)进行信息展示.HTML由WEB发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立.
所谓超文本:是因为它可以加入图片/声音/动画/视频等内容(超越了文本的范畴);
所谓标记:是因为HTML所有的操作都是通过标记实现, 每一个HTML文档都是静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版资料显示位置的标记结构语言, 如:<标签名称>标签内容</标签名称>
HTML规范
- 一个HTML文件必须有开始标签和结束标签
<html></html>; - HTML包含head/body两部分内容:
<head>页面设置信息</head><body>页面显示内容</body>
- HTML标签要有始有终(如
<table></table>), 空元素标签需要在标签内结束(如<hr/><br/>); - HTML代码不区分大小写;
HTML操作思想
- 一个网页中可能会有很多数据, 不同的数据需要不同的显示效果,此时就使用标签把需要展示的数据封装起来,通过修改标签属性值以实现标签内数据样式的变化;
- 一个标签相当于一个容器,想要修改容器内数据样式,只需要修改容器属性值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Html</title>
</head>
<body>
<font size="5" color="red">Hello World !</font>
<hr/>
<font size="6" color="green">世界你好</font>
</body>
</html>HTML常用标签
简单标签
注释标签
<!-- HTML的注释 -->注意: 浏览器不展示,但查看源代码时可看到.
文字标签 : 修改文字样式
<font></font>
| 属性 | 描述 |
|---|---|
| size | 文字的大小(取值范围1-7) |
| color | 文字颜色[两种表示方式:英文单词(red/green/blue)/十六进制数(#ffffff:RGB) |
标题标签
<h1></h1>-><h6></h6>: 依次变小水平线标签
<hr/>
| 属性 | 描述 |
|---|---|
| size | 水平线粗细 取值范围 1-7 |
| color | 颜色 |
- 特殊字符: 需要对特殊字符进行转义才能在网页上显示:
| 字符 | 转义 |
|---|---|
< |
< |
> |
> |
空格 |
|
& |
& |
注册符® |
® |
版权符© |
© |
- 图像标签
<img src="图片的路径"/>
| 属性 | 描述 |
|---|---|
| src | 图片路径 |
| width | 图片宽度 |
| height | 图片高度 |
| alt | 图片出错时显示的文字 |
- 超链接标签
<a href="资源地址">说明</a>
| 属性 | 描述 |
|---|---|
| href | 链接资源地址,当超链接不需要跳转时,设为# |
| target | 设置打开的方式[_blank新窗口打开/_self当前页打开(默认)] |
拓展:
定义锚点: `<a name="top">顶部</a>`
回到锚点: `<a href="#top">回到顶部</a>`
列表标签
- 层次列表
<dl></dl>: 层次列表<dt></dt>: 上层内容<dd></dd>: 下层内容
<dl>
<dt>阿里巴巴集团</dt>
<dd>淘宝</dd>
<dd>阿里云</dd>
<dd>阿里妈妈</dd>
</dl>
- 有序列表
<ol></ol>: 有序列表
| 属性 | 描述 |
|---|---|
| type | 排序方式[1(默认)/a/i] |
<li></li>: 列表内容
<ol type="A">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ol>- 无序列表
<ul></ul>: 无序列表
| 属性 | 描述 |
|---|---|
| type | 实心圆disc(默认)/空心圆circle/实心方块square |
<li></li>: 列表内容
<ul type="circle">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ul>表格标签
<table></table>: 用于对数据进行格式化, 使显示更加清晰
| 属性 | 描述 |
|---|---|
| border | 表格线 |
| bordercolor | 表格线颜色 |
| cellspacing | 单元格距离 |
| width | 表格宽度 |
| height | 表格高度 |
<caption></caption>: 表格标题<tr></tr>: 行
| 属性 | 描述 |
|---|---|
| align | 设置内容对其方式[left/center/right] |
<th></th>: 表格首行列<td></td>: 表格内容列- 合并单元格
rowspan：跨行<td rowspan="行数"></td>colspan：跨列<td colspan="列数"></td>
<table border="1" bordercolor="aqua" cellspacing="0" width="400" height="150">
<caption>表格标题</caption>
<tr>
<td colspan="4" align="center">跨列标题</td>
</tr>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td rowspan="2">跨行内容</td>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>如果单元格内没有内容, 需要使用空格符
占位.
表单标签
<form></form>: 用于向服务端提交数据
| 属性 | 描述 |
|---|---|
action |
提交地址,默认提交到当前页面 |
method |
提交方式[GET/POST] |
enctype |
指定发送到服务器数据的编码格式[application/x-www-form-urlencoded: 表单数据/ multipart/form-data: 文件上传] |
表单输入项
每个输入项中必须要有一个
name属性, 以标识该输入项的key,服务端获取表单数据时用.
- 文字输入项：
<input type="text"/> - 密码输入项：
<input type="password"/> - 单选按钮：
<input type="radio"/>
性别:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女两个按钮name属性值相同,且必须有value值,实现默认选中:checked="checked".
- 复选按钮：
<input type="checkbox"/>
爱好
<input type="checkbox" name="hobby" value="checkbox"/>羽毛球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="swim"/>游泳属性描述同radio.
- 文件上传:
<input type="file"/> - 下拉菜单:
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>默认选择selected="selected"
- 文本域
<textarea cols="10" rows="10"></textarea> - 隐藏项
<input type="hidden" />
不会显示在页面上, 但会存在于HTML代码里面. - 提交按钮
<input type="submit"/> - 图片提交
<input type="image" src="图片路径"/> - 重置按钮
<input type="reset"/> - 普通按钮
<input type="button" value=""/>
需要同JS一起使用.
其他标签
| 标签 | 作用 |
|---|---|
<b/> |
加粗 |
<s/> |
|
<u/> |
下划线 |
<i/> |
斜体 |
<pre/> |
原样输出 |
<sub/> |
下标下标 |
<sup/> |
上标上标 |
<p/> |
段落标签(比br标签多一行) |
<div/> |
自动换行(结合CSS) |
<span/> |
不自动换行(结合CSS) |
HTML头标签
<title>: 网页显示标题<meta>: 页面设置
<meta name="keywords" content=""><meta http-equiv="refresh" content="3;url=current.html" />
<base/>: 设置当前页面所有链接默认地址<base target="_blank"/>: 统一设置超链接打开方式<link/>：引入外部文件,如CSS等
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)