HTML简单使用

最新推荐文章于 2023-05-03 22:19:26 发布

菜鸟-翡青

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量2.5k

点赞数 3

分类专栏：前端技术文章标签： html 前端语言图片 WEB

本文链接：https://blog.csdn.net/zjf280441589/article/details/51262588

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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常用标签

简单标签

注释标签


注意: 浏览器不展示,但查看源代码时可看到.
文字标签 : 修改文字样式
<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等

菜鸟-翡青

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML简单使用

HTML简单使用标签：前端技术HTML HTML(Hypertext Marked Language), 即超文本标记语言,能够独立于各种操作系统平台(如UNIX/Linux/Windows等)进行信息展示.HTML由WEB发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立. 所谓超文本:是因为它可以加入图片/声音/动画/视频等内容(超越了文本
复制链接

扫一扫