HTML学习笔记_01基础

一. 基本结构

二. 基础标签

----1. 文档类型声明

----2. 定义网站语言

一. 基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>test01</title>
</head>
<body>
<body>
</html>

## 二. 基础标签

1. 文档类型声明

<!DOCTYPE html>  html5 <!--文档类型声明-->

2. 定义网站语言

<html lang="en"> <!--定义网站语言-->
<!-- lang = "en"
	 lang = "zh-CN"
	 lang = "fr"    -->

3. 字符集声明

<meta charset="UTF-8"> <!--字符集声明-->

4. 注释

<!--注释-->

5. 换行标签

单标签

</br>
<br />

6. 插入图片

<img src = "图片链接" alt = "替代文字" title = "提示文字"> </img> <!--例子-->

属性	属性值	说明
src(必要属性)	图片路径	必须属性，“../表示上级路径”
alt	文本	替换文本
title	文本	提示文本,鼠标放到图片上显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

7. 标题标签

独占一行，醒目显示

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<!--下方表头html代码-->

h1

h2

h3

h4

h5

h6

8. 段落标签

<p>第一个
    段落</p>
<p>第二个<br/>段落</p>
<!--下方代码——>

第一个段落

第二个段落

9. 文本格式化标签

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

<em>倾斜标签</em>
<i>倾斜标签</i>

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

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

加粗标签

倾斜标签

~~删除线~~

下划线

10. <div>

布局大盒子标签

<div></div>

11. <span>

行级小盒子标签

<span></span>

12. 超链接标签

<a href="链接" target = '_blank'>图片表格文字都可加链接</a>

属性	属性值	作用
href	href地址	指定链接目标的href地址
target	_self，_blank	指定链接页面的打开方式,_self当前窗口打开，_blank新窗口打开

13. 锚点链接标签

<a href = "#id"> </a>   	<!--锚点--> 		<!--起跳点-->
<div id = "id"> </div>  	<!--id定位-->		<!--落地点1-->
<div name = "name"> </div>  <!--name定位-->	<!--或落地点2-->

posted on 2021-04-09 11:51 摸鱼time 阅读(55) 评论(0) 编辑收藏举报