HTML学习0322-CSDN博客

本文链接：https://blog.csdn.net/EM688/article/details/136951645

准备工作

下载好VSCODE软件和谷歌浏览器。

HTML框架

<!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>

HTML5中的DOCTYPE声明

DOCTYPE位于文档开头，避免不同浏览器下代码的渲染与效果不一致。

在声明后面都是H5的框架

html标签：<html></html>

定义了html文件，所有的代码都写在这里面

head标签：<head></head>

定义了文档的头部，包含文档的属性和信息，例如文档的标题，在web中位置等等，

body标签：<body></body>

文档的主体，包含文字，图片，超链接，表格和列标等等，都会显示在页面上。

框架快捷操作：英文！＋回车键即可快速写出H5框架。

title标签：<title></title>

<title>我的网页</title>

在title标签中写的语句，将作为网页的标题出现

title标签写好了被搜索时有优势，能排在更前的网页位置。

meta标签：<meta>

首先注意meta为单标签！然后meta描述文档的属性。

标题

标题由<h1>-<h6>标签进行定义的，级别由大到小，且为对标签，写在body标签内。

快捷生成键：h$*6再回车，生成6个标签

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>

属性

在标签中添加属性，在第一个标签的'>'左边添加该标签的属性。

例如上面标题的属性添加有排布位置align。

<body>
    <h1 align="center">一级标题</h1>
    <h2 align="right">二级标题</h2>
    <h3 align="left">三级标题</h3>
</body>

在还未学习css之前，暂时这样更改标签的属性。

段落

段落使用<p>标签定义。

<p>段落1,这是第一个段落。</p>
<p>段落2,这是另一个段落。</p>

换行

在一个段落中另起一行，使用<br>标签在需要另起的地方使用即可，为单标签。

<P>段落三，这个段落里我再另起一行<br>这是另一行</P>

水平线

使用<hr>标签在网页中创建水平线。

水平线有四个属性可以进行修改：

设置颜色，color="----"

设置宽度（横长，单位px），width="----"

设置高度（粗细，单位px），size="----"

设置位置（默认居中center），align="----"

<hr color="green" width="400px" size="5px" align="center">

图片

使用<img>标签定义图像，为单标签。

 <img src="" alt="">

快捷键输入<img>后，会自带两个属性。

标签<img>有如下几个属性可以进行修改：

图像的存储路径，src='----'

图像的替代文本（当图片显示不出来时，使用这个文本进行替代展示），alt='----'

图像的宽度，width='----'

图像的高度，height='----'

鼠标停留在图片上的提示语，title='----'