HTML基础

一.HTNML常用标签

1.文体结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注:

标签:由尖括号<>包围,通常成对出现

1.HTML标签分为单标签和双标签(成对出现)两种。
2.<!DOCTYPE html>:声明文档类型是符合HTML5标准的。
3.<html> </html>是文档开始与结束的标记,包含head和body两部分。
4.<head> </head>是HTML头部,包含title标签及文档的元(meta)数据(提供关于网站的各种信息)等,不在浏览器的文档窗口中显示。
5.<title> </title>是HTML标签结构标签,在浏览器标题栏显示。
6.<body> </body>是HTML主体标签,网页中包含的具体内容。

7.charset属性:字符集编码方式

2.常用标签

(1)标题(双标签)

h1--h6分别代表一级--六级标签

注:一个页面建议只有一对h1标签

每级标题大小不同,一级标题文字字号最大(如图)

(2)段落(双标签)

1.p标签会对其中内容进行自然分段,段落之间浏览器会默认添加一个段落间距

2.浏览器默认样式可能出现后几级标题比正文小的情况,可用css样式规定

3.对于HTML的源文件来说,会自动变连续空格为一个空格,且不换行.

(3)段内换行(单标签)

<br />

水平线标签:<hr>

空格字符:&nbsp(特殊字符是由&开头,  ;结束且全用小写)

(4)预留格式(双标签)

<pre></pre>

(5)超链接

<a></a>

内容分类:1.文字超链接2.图片超链接3.导航栏

格式:<a href="网址">进行超链接的文字或图片</a>

链接分类:1.链接到其他站点

2.连接到本站点其他网页

3.虚拟超链接:<a href="#"></a>

(6)拓展标签

<em></em>斜体标签

<b></b><strong></strong>加粗标签

<u></u><ins></ins>下划线标签

<s></s><del></del>删除线标签

<dl></dl>自定义列表标签

        <dt>定义标题<dd>定义内容

<nav></nav>导航排版标签

<article></article>独立区域排版标签

(7)插入图像

图像格式:JPG,GIF,PNG

标签格式:<img src="路径+文件名" alt="文件的替换文本">

(8)区域

单独的一个组成部分

<div></div>

上角标:<sup></sup>

(9)表格

<table> </table>

<tr>定义了表格中的行

<th>定义了表头内容,文字居中

<td>定义了单元格的内容。

(10)表单

<form> </form>

(11)输入与选择

<input type="text/password/radio/checkbox"/>

文本框:type="text"
密码框:type="password"
单选框:type="radio"
复选框:type="checkbox"
<select> </select>:下拉列表框标签,其中标签项<option>定义选项。

(12)文本域标签

<textarea> </textarea>

(13)列表标签

<ol> </ol>有序列表标签,其中标签项<li>是有序的。

<ul> </ul>无序列表标签,其中标签项<li>是无序的,<li>中可以放<p>标签内容。

<dl> </dl>自定义列表标签,其中标签项<dt>定义了标题,<dd>定义了内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值