HTML基础介绍-CSDN博客

本文链接：https://blog.csdn.net/m0_55577215/article/details/114669637

HTML概述

超文本标记语言（Hyper Text Markup Language）

作用：编写网页

只需要把定义好的这一套标签掌握即可

超文本:超越一般文本,可以把文本内容转成图片,超链接,表格…

标记:标签

语言:和计算机交互工具

HTML基础

<!DOCTYPE html>
<!--
    这个是注释
    html:声明自己是一个html文件
        两个常用子标签
        head:头标签,存放的是网页的一些重要的信息(标题,元信息)
            meta:元信息 例如:关键字,描述等
            title:网页的标题
            link:导入外部css文件
            script:编写或者导入js代码
        body:身体标签,展示页面上信息

-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html入门</title>
</head>
<body>
    你好!html!
</body>

</html>

HTML组成和规范

html是一个不太严谨的语言.

标签分为自闭合标签(空标签,例如:br meta hr)和闭合标签(有开始标签和结束标签例如:html head body)
```
<br/>  空标签
<title>文本或者标签</title>
```
标签不区分大小写
属性值用引号引起来,多个属性之间使用空格隔开
多个半角空格在页面上展示的时候只有一个空格

HTML常用标签

标题标签

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>01-标题</title>
	</head>
	<body>
<!--
	标题标签 hn
		h1-h6
			h1最大
			h6最小
		特点:
			默认加粗和换行
		常用属性:
			align:水平对齐方式
				left right center
-->
	<h1 align="center">我是1级标题</h1>
	<h2 align="right">我是2级标题</h2>
	<h3>我是3级标题</h3>
	<h4>我是4级标题</h4>
	<h5>我是5级标题</h5>
	<h6>我是6级标题</h6>
	</body>
</html>

水平线标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>02-水平线</title>
</head>
<body>
<!--
    hr:空标签
        常见属性:
            width:宽度
                单位:像素(默认值 px)或者百分比
            align:对齐方式
            color:颜色
                单词:red yellow blue green..
                rgb:#6个十六进制  #ff0000 每个颜色的两值一样的话可以省略为#f00
             size:厚度 高度

-->
你好!
<hr width="200" align="left" color="red">
<hr width="40%" color="#D2E0ED" size="6">
你好!

</body>
</html>

超链接标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>04-超链接</title>
</head>
<body>
<!--
    a 超链接
        常用属性:
            href:跳转的路径
                路径:网站的url
                文件的相对路径和绝对路径
                    ./ 当前目录
                    ../ 上一级目录

            target:打开连接的地方
                _self:当前窗口
                _blank:在新的窗口
                _parent:父窗口
                _top:顶级窗口
                框架名字
-->
    <a href="http://www.baidu.com">百度</a><br/>
    <a href="http://www.baidu.com" target="_self">百度</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度</a><br/>
    <a href="01-标题.html" target="_blank">标题页面)_相对路径</a><br/>
    <a href="D:\ideaws\web3\day01_html\01-标题.html" target="_blank">标题页面)_绝对路径</a><br/>

</body>
</html>

水平线标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>02-水平线</title>
</head>
<body>
<!--
    hr:空标签
        常见属性:
            width:宽度
                单位:像素(默认值 px)或者百分比
            align:对齐方式
            color:颜色
                单词:red yellow blue green..
                rgb:#6个十六进制  #ff0000 每个颜色的两值一样的话可以省略为#f00
             size:厚度 高度

-->
你好!
<hr width="200" align="left" color="red">
<hr width="40%" color="#D2E0ED" size="6">
你好!

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>05-图像</title>
</head>
<body>
<!--
    img 图片标签  空标签
        常用属性:
            src:图片的路径
            width:宽度 用了百分比,高度就不要设置了
            height:高度
            alt:当图片展示不出来的时候的替代文字

    几乎标签都有的属性:
        title:鼠标悬停上去的提示
-->
    <img src="image/11.jpg" width="5%" height="100%" alt="图片名称"/>
    <img src="image/1.jpg" width="100" height="100" title="图片名称"/>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>06-列表</title>
</head>
<body>
<!--
    有序列表
        ol
            了解属性:
                type:排序展示方式 1 a A I i
                start:从第几位开始
    无序列表
        ul
            了解属性:
                type:排序展示方式 circle空心圆 disc实心圆 square方块

    列表项需要通过li标签体现出来
-->
    <ol type="a" start="3">
        <li>杨幂</li>
        <li>杨颖</li>
        <li>杨紫</li>
    </ol>
<hr>
    <ul type="circle">
        <li>杨幂</li>
        <li>杨颖</li>
        <li>杨紫</li>
    </ul>
</body>

06-列表

–>

杨幂
杨颖
杨紫

杨幂
杨颖
杨紫

##实体字符 div和span标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>07-容器标签</title>
</head>
<body
>
<!--
    <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
        div是块级标签,独自占一行
        span是内联标签,和其他的文本在一行

        b:加粗
        i:斜体
-->
    <div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个<b>span</b></span>
    <span>我是一个<i>span</i></span>
</body>
</html>