HTML基础语法_html基本语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_43351999/article/details/102884344

HTML基本语法

HTML不需要编译，直接由浏览器执行
HTML文件是一个文本文件
HTML文件必须使用html或htm为文件名后缀
HTML大小写不敏感，HTML与html相同

HTML基本结构

HTML标签

一般成对出现
<标签>

HTML元素

由开始标签、内容、结束标签组成

HTML属性

<标签名属性名1 = “属性值” …>…</标签名>

注释

<!-- hr是水平线-->

<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
</head>
<body bgcolor="red">
    <p>hello html!</p>
    <hr><!--hr是水平线-->
</body>
</html>

DOCTYPE文档类型声明

声明必须放在HTML文档第一行
声明不是HTML标签

<!DOCTYPE html>
<html>
<head>
    <!--网页头部内容-->
    <title>文字和段落标签</title>
</head>
<body>
    <!--网页主题内容-->
    hello
</body>
</html>

网页编码设置

<!DOCTYPE html>
<html>
<head>
    <title>文字和段落标签</title>
</head>
<body>
    HTML是超文本语言
</body>
</html>

问题：上述代码运行会导致乱码
解决：在<head>></head>标签添加<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>即可

<!DOCTYPE html>
<html>
<head>
    <title>文字和段落标签</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    HTML是超文本语言
</body>
</html>

文字和段落标签

标题标签

<h1></h1>~<h6></h6>

段落标签

<p></p>

align对齐属性值

值	left	right	center	justify
描述	左对齐内容	右对齐内容	居中对齐内容	对行进行伸展，这样每行都可以有相等的长度

换行标签

<br/>

水平线

属性	width	color	align	nosjade
描述	设置水平线宽度，可以像素或百分比	设置水平线颜色	设置水平线居中对齐	设置水平线无阴影

修饰标签

文字斜体：、
加粗：、
下标：
上标：
下划线：<ins>
删除线：<del>

特殊符号

属性	<	>
显示结果	<	>	Space
描述	小于号或显示标记	大于号或显示标记	不断行的空白

<!DOCTYPE html>
<html>
<head>
    <title>文字和段落标签</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <h1>什么是HTML</h1>
    <h2>什么是HTML</h2>
    <h3>什么是HTML</h3>
    <h4>什么是HTML</h4>
    <h5>什么是HTML</h5>
    <h6>什么是HTML</h6>
    <p align="left">HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</p>
    <p align="right">HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</p>
    <p align="justify">HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</p>
    <p align="center">HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;HTML 指的是超文本标记语言，
    <br/>HTML 不是一种编程语言，
    <br/>而是一种标记语言，
    <br/>标记语言是一套标记标签</p>
    <pre>
        HTML 指的是超文本标记语言，
    HTML 不是一种编程语言，
    而是一种标记语言，
    标记语言是一套标记标签
    </pre>
    <hr width="80%" color="#6666" align="left"/>
    <p><i>HTML</i> 标记标签通常被称为<em>HTML 标签</em></p>
    <p>HTML 标签是由<b>尖括号</b>包围的<strong>关键字</strong></p>
    <p>HTML 标签通常是<ins>成对出现</ins></p>
    <p>标签对中的第一个标签是<del>开始标签</del>，第二个标签是<del>结束标签</del></p>
    <p>开始和结束标签也被称为<sup>开放标签</sup>和<sub>闭合标签</sub></p>
    <p>标签成对出现，比如&lt;b&gt;&lt;/b&gt;</p>
</body>
</html>

在这里插入图片描述

列表标签

无序列表

<ul>
<li>列表项</li>
<li>列表项</li>
......
</ul>

type属性值

值	disc	square	circle
描述	圆点	正方形	空心圆

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>标题</title>
</head>
<body>
<h1>什么是 HTML？</h1>
<ul type="disc">
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ul>
<ul type="square">
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ul>
<ul type="circle">
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ul>
</body>
</html>

在这里插入图片描述

有序列表

<ol>
<li>列表项</li>
<li>列表项</li>
......
</ol>

type属性值

值	1	a	A	i	I
描述	数字1，2…	小写字母a，b…	大写字母A，B…	小写罗马数字i	大写罗马数字I

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="hello.html">
<meta name=viewport content="width=device-width, initial-scale=1">
    <title>标题</title>
</head>
<body>
<ol type="1">
<li>指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ol>
<ol type="a">
<li>指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ol>
<ol type="I">
<li>指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
<li>HTML 指的是超文本标记语言</li>
<li>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</li>
</ol>
</body>
</html>

在这里插入图片描述

定义列表

<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
…
</dl>

<dl>
<dt>指的是超文本标记语言</dt>
<dd>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</dd>
<dd>HTML 指的是超文本标记语言</dd>
<dt>HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签</dt>
</dl>

列表标签应用场景

可在网页中的开发者选项查看

图像和超链接标签

图像标签

<img src="" alt=""/>

img属性

属性	Src(必写)	alt	height	width
值	URL	文字	数值和百分比	数值和百分比
描述	显示图像的URL	图像代替文本	图像的高	图像的宽

路径选择

<img src="1.jpg"/>

<img src="../1.jpg"/>

<img src="文件夹名/1.hpg"/>

绝对路径直接写地址

alt属性

当由于网速太慢、src属性中的错误、浏览器禁用图像，用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容

<!DOCTYPE html>
<html>
<head>
    <title>图像和超链接</title>
    <meta charset=utf-8>
    <meta name=description content="hello.html">
    <meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
    <img src="1.jpg" alt="html" width="50px" height="80px" />
</body>
</html>

效果不予展示，原因为本人图片，自己脑补吧

超链接标签

<a href=" "></a>

href:链接地址，可以是内部链接或外部链接

<!DOCTYPE html>
<html>
<head>
    <title>图像和超链接</title>
    <meta charset=utf-8>
    <meta name=description content="hello.html">
    <meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
    <a href="https://home.firefoxchina.cn/?from=extra_start"><img src="1.jpg" alt="html" width="50px" height="80px" /></a>
</body>
</html>

空链接：<a href= "#">

属性

属性	href	target	title	name
描述	链接地址	链接的目标窗口_self、_blank、_top、_parent	链接提示文字	链接命名

_self：在当前窗口打开
_blank：在新窗口打开

锚链接

在当个页面内不同地方的跳转，也叫书签

定义锚（同一页面）

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1">内容</a>
XXXXXXXXXX
XXXXXXXXXXXXXXXXXX
<a href="..." name="锚名2">内容</a>
XXXXXXXXXX
XXXXXXXXXXXXXXXXXX

锚链接使用

定义锚的位置和锚名
设置寻找锚的链接

定义锚（不同页面）

网页1：<a href=" 网页名称#锚名" >......</a>
网页2：<a name=" 锚名" >......</a>

邮件链接

<a href="mailto:邮件地址">......</a>

文件下载

<a href="下载文件的地址">......</a>

HTML基础语法

文章目录

HTML基本语法

HTML基本结构

HTML标签

HTML元素

HTML属性

注释

DOCTYPE文档类型声明

网页编码设置

文字和段落标签

标题标签

段落标签

align对齐属性值

换行标签

水平线

修饰标签

特殊符号

列表标签

无序列表

type属性值

有序列表

type属性值

定义列表

列表标签应用场景

图像和超链接标签

图像标签

img属性

路径选择

alt属性

超链接标签

属性

锚链接

定义锚（同一页面）

锚链接使用

定义锚（不同页面）

邮件链接

文件下载