Web前端学习笔记 —— HTML（一）

Reggiecx

已于 2022-05-09 11:21:24 修改

阅读量253

点赞数

分类专栏： Web前端学习文章标签： html

于 2022-04-04 14:42:15 首次发布

本文链接：https://blog.csdn.net/qq_55921331/article/details/123952764

版权

Web前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在b站跟着pink老师学的，超级小白一枚，把这里当成是笔记.

1. 什么是网页

网页是网站中的一“页”，通常是 HTML 格式的文件，通过浏览器阅读。

2. web的标准构成

标准	说明
结构	对网页元素进行整理和分类，现阶段主要学的是HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式，主要指css
行为	指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

3. 标签基本语法

单标签：如<br />
双标签：如<html></html>

4. 标签关系

包含关系

<head>
    <title></title>
 </head>

并列关系

<head></head>
<body></body>

5. 基本结构

<html> 
    <head> 
         <title>标题</title>
    </head>
    <body>
       ....
    </body>
</html>

标签名	定义	说明
`<html>`	HTML标签	页面中最大的标签，成为根标签
`<head></head>`	文档的头部	注意在head标签中必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网友为标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

6. 标题标签

有以下六个等级（从上往下字号依次减小）：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

特点：

加了标题的文字会变的加粗，字号也会依次变大。
一个标题独占一行。

7. 段落标签

<p></p>

会根据浏览器窗口的大小自动换行
段落与段落之间会有垂直间距
使用<br />进行换行，之间不会有间距

8. `<div>`和`<span>`标签

大盒子：<div>用来布局，但一行只能放一个</div>
小盒子：<span>用来布局，一行上可多个</span>

9. 文本格式化标签

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	`推荐使用strong`
倾斜	`<em></em>`或`<i></i>`	`推荐使用em`
删除线	`<del></del>`或`<s></s>`	`推荐使用del`
下划线	`<ins></ins>`或`<u></u>`	`推荐使用ins`

10.图像标签

<img src="图像url" />

（1）属性

src：图片路径，是必须属性
alt：文本属性，替换文本（图像不能显示时，显示的文字）
title：文本属性，提示文本（鼠标放到图片上时，显示的文字）
width：像素，设置图像宽度
height：像素，设置图像高度
border：像素，设置图像边框粗细

（2）相对路径

同一级路径：<img src="xxx.jpg" />
下一级路径：<img src="images/xxx.jpg" />
上一级路径：<img src="../xxx.jpg" />

（3）绝对路径

如：“D:\web\img\logo.jpg” —> 一般不用，因为在另一电脑的图片路径不同
如：完整网络地址：“http://www.itcast.cn/images/logo.jpg”

11.超链接标签

<a href="跳转目标(链接目标的url地址)" target="目标窗口的弹出方式">文本或图像</a>

target目标窗口的弹出方式：

self 默认
blank 在新窗口打开

外部链接：<a href="http://www.baidu.com">百度</a>
内部链接：<a href="index.html">首页</a>
目标链接未确定时：<a href="#">首页</a>
若href里是一个文件，则会下载这个文件

锚点链接：
<a href="#two" >第二集</a>
<h3 id="two" >第二集介绍</h3>

12.注释

<!--注释内容-->

13.常用符号

空格符： 
大于号：>
小于号：<