html基础语法和常用标签

最新推荐文章于 2022-09-07 08:10:24 发布

鸽了一路

最新推荐文章于 2022-09-07 08:10:24 发布

阅读量159

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45575912/article/details/114594231

版权

HTML基础

1.基本格式

一段html代码中包括<!doctype html>，head，body这几个主要部分。

“<!doctype html>”：文档声明|doctype文档声明|html文档生命，告诉浏览器当前html是什么版本，而且它不是一种标签，只是一种声明格式。

“title”是标题标签，主要是当前文档的主要标题，是head中必有的标签。

“head”构成HTML文档的开头部分。head和head标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

body之间是HTML文档的主体部分，在此标志对之间可包含div、a、p、h1、hr等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

<!--文档声明|doctype文档声明|html文档声明
告诉浏览器当前html是什么版本
注：不是标签，是一个声明格式
-->
<!DOCTYPE html>
<!--网页使用的语言是英语-->
<html lang="en">
<!--开头部分-->
<head>
    <meta charset="UTF-8">
    <!--head中必须要有title-->
    <title>html第一节课</title>
    <!--开头部分结束-->
</head>
<body>
hahahahahahha
</body>
</html>

2.标签

双标签|闭合标签：成对出现，又开始有结束

单标签|自闭合标签：不需要在标签对中添加内容的标签，定义为单标签

标签的属性：可以帮助更完整的展示标签功能。

2.1a标签

a标签的作用是超链接，主要属性包含：

href：必有属性，可以连接路径，路径分为相对路径和绝对路径。

显示样式：链接未访问——字体蓝色有下划线

链接已访问——字体紫色有下划线

title：鼠标悬停在标签上显示的提示字

target：路径的打开方式

_blank新页面打开

_self本页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>003</title>
</head>
<body>
    <!--标签为001；鼠标悬停时显示“欢迎来到003；打开方式为新页面打开”-->
    <a href="001.html" title="欢迎来到003" target="_blank" >001</a>
    <a href="002.html" title="欢迎来到003" target="_blank" >002</a>
</body>
</html>

2.2锚链接

在页面中设置一个点，通过a标签的href的id属性回到该点。

语法：< a href="#id属性值" >

<!--通过锚链接标签 点击“回到锚点”回到id值为521的地方-->
<a href="#521">回到锚点</a>

2.3img图像标签

img图像标签在html页面中用来引入一张图像，主要属性包含：

src：图像地址

title：鼠标悬停时显示的提示字

alt：图片无法正常加载时，显示的提示字

wigth：宽度属性 px

heigth：高度属性 px 如果宽高只设置一个，另一个等比缩放

border：边框属性 px 默认是黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
</head>
<body>
<!--在页面中引入一张图片，采用绝对路径方法-->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fphoto%2Fpublic%2Fp1655461834.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617782461&t=e780ee81ac4e0a5d91c76cf3d93bad3a" alt="" >
<!--通过相对路径引入一张图片-->
<img src="iamge/123.jfif" alt="无法显示">
<a href="https://www.baidu.com/" target="_blank"><img src="iamge/123.jfif" alt="无法显示"></a>
<!--点击图片可以链接到其他网站-->
<a href="https://www.baidu.com/">aaaaaaaa</a>
</body>
</html>

2.4div标签

div标签属于块元素，独占一行且前后换行，可以嵌套其他元素，统一管理元素标签，同一设置样式。块元素共有的属性：

align：设置块元素中的内容在当前块元素中的对其方式

left 左对齐默认
right 右对齐
center 居中对齐
justify 两端对齐多行文本下，两端对齐有效果

行内元素：可以与其他元素同行显示，宽度由内容撑起来，不设置宽高，嵌套其他行内元素或者普通文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div使用</title>
</head>
<body>
    <!--行内元素-文本宽度由"前面"内容撑起来不可以设置宽高，与”中间同一行“-->
    前面
    中间
    <a href="">asdas</a>
    <!--块是独占一行 可以设置宽高，设置居中方式-->
    <div align="left">左对齐</div>
    <div align="center">中间对齐</div>
    <div align="right">右对齐</div>
    <!--块也可以嵌套其他元素-->
    <div align="center">
        <a href="https://www.baidu.com/" title="欢迎百度一下" target="_blank">百度</a>
    </div>
    后面
    <a href="">asdasd</a>
</body>
</html>

2.5p标签

段落标签属于块元素，上下留白16px，一般嵌套其他行内元素或者普通文本。

2.6h标签

标题标签，从h1-h6根据权重不同，字体大小依次减小。

	<p align="center">
        我是p标签
        <a href="#">a</a>
        <img src="" alt="">
    </p>
    <hr>
	<!--h1~h6表示字体的大小-->
    <h1>坏蛋是怎样炼成的</h1>
    <h2>二</h2>
    <h3 align="center">三</h3>
    <h6>六</h6>