HTML | 梦始

html 是一门制作网页的语言。

1.html基本结构(骨架标签)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>//声明html类型（html5)
<html lang="en">//语言是什么
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yrb.个人网页</title>
</head>
<body>
    我只能说教教我
</body>
</html>
一般标签都是成对存在，称为双标签
但是有的单标签不用如< br / >

html标签
head标签代表页面的头，，定义一些特殊的内容，这些内容往往都是“不可见的内容”（浏览器页面不可见）

< head >	说明
< title >	定义网页的标题
< meta >	定义网页的基本信息
< style >	定义CSS样式
< link >	链接外部的CSS文件或者脚本文件
< scripe >	定义脚本语言
< base >	定义所有页面的基础定位

body标签
body标签代表页面的身体，定义网页的内容，这些内容往往都是“可见的”，在浏览器里面
标签关系：
- 包含关系：
- 并列关系：

2.段落与文字

段落标签
段落与文字标签：

标签	语义	说明
< h1>~< h6>	header	标题
< p>	paragraph	段落
< br>	break	换行
< hr>	horizontal rule	水平线
< div>	division	分割元素块（块元素）
< span>	span	区域（行内元素）

< html lang=” “>引号里面指名网页的语言：(定义为中文英文都可以互通)

en为英语

zh-CN为中文

fr为法语

< meta charset =”UTF-8”>字符集
不写编码形式会出现乱码

常用的GB2312，BIG5,GBK,UTF-8，其中UTF-8称为万国码

文本格式化标签

标签	语义	说明
< strong>< /strong>或者< b>	strong（加强）	加粗
< em>	emphaseized（强调）	斜体
< cite>	cite（引用）	斜体
< sup>	superscripted	上标
< sub>	subscripted	下标
< del>		删除线
< ins>		下划线

< div>和< span>标签

没有语义的用来装内容，当成一个盒子

< div>占用一哈
< span>跨距显示，一行有多个

图像标签和路径

1.图像标签

在html中，< img>用来定义一个图像（imaging)

1	<img src="图像URL"/>

src是必须属性，它用于指定图像文件的路径和文件名（属性就是这个图像标签的特性)
使用时把图片发在同一个文件夹里面

src	图像路径
alt	文本提示（在图像无法显示时候会提示）
title	图像提示
width	宽度设置
height	高度设置
border	图像的边框

图像可以有多个属性，但是都放在img后面，且各个属性没有先后之分
需要用空格隔开
采取属性键对

超链接标签（重点）

在html中，< a>标签用于定义超链接，作用从一个页面链接到另一个页面

超链接的语法格式

1	<a href="跳转目标" target="窗口弹出方式">文本或者图像<a/>

链接分类：

外部链接：必须写上绝对路径,加上https://
内部链接（同一目录【级别】下的链接）：直接写页面的名称如”index.html”
空链接：#
下载链接：地址链接的是文件.exe 或者是 .zip 等压缩包形式,会直接下载这个exe或者zip，音频等。
网页链接元素，在网页里的各种网页元素，如文本，图像，表格，音频，视频都可以添加超链接。
锚点链接：点击该处可以快速定位到网页的某一个位置（也可以实现跳转到顶部等等）

1 2	target: _self在当前页面打开(默认的），_blank在新的窗口打开

锚点链接的具体操作：
先把字串里面的写入”#一段id”,之后找到目标的标签，在其之后加上”id=”这段id的名字””就可以实现锚点跳转。
注释标签
html中注释形式如下:
1
可以使用”Ctrl + /或?”直接快捷键打出来
注释不会显示，只是用来

特殊字符

$D:\cworkspace\web\笔记1.png$

- 重点记住空格和大于小于号。

1.表格标签

1.1表格的主要作用

表格主要是用来显示，展示数据，因为它可以让数据显示的非常规律，可读性非常好，表格不是用来布局页面的，而是用来展示数据的。

1.2表格的基本语法
1
2
3
4
5
6
7
<table>
  <tr>//表格里的行
    <td>单元格内的文字</td>
    ···
  </tr>
  ···
</table>
< table>是用来定义表格的标签

< tr>< /tr>用来定义行，必须定义在table内部

< td>< /td>用来定义单元格，必须定义在< tr>内

< th>< /th>表头单元格标签，（table head)，表头内容会被加粗，同时居中。

1.2表格属性(到这里去练习一下)

不常用，因为后面会使用CSS

align （属性值：left ,right , center),设置表格的位置
border (1 或 “” ),规定表格是否具有边框，默认为””，表示没有边框
width （像素值或百分比），规定表格的宽度
height (像素值或百分比) ，规定表格的长度
cellpadding (像素值)，规定单元边沿与其内容之间的空白，默认像素为1。
cellspacing （像素值），规定单元格之间的空白，默认像素值为2.

1.3表格结构标签

使用场景：因为表格可能很长，

音频文件

1
2
3

//html里如果属性名字和属性值完全一致，可以只写属性名字。
<audio src="" controls></audio>
//等同于<audio src="" controls="controls"></audio>

controls为显示控制面板
loop是循环播放
autoplay自动播放
支持mp3,WebM,Ogg文件

视频文件

1	<video src=" .mp4" controls></video>

loop循环播放
mute静音播放
autoplay自动播放
支持mp4,WebM,Ogg文件

1.html基本结构(骨架标签)

html标签

body标签

标签关系：

2.段落与文字

段落标签

标签

文本格式化标签

文本格式化标签

< div>和< span>标签

图像标签和路径

1.图像标签

超链接标签（重点）

超链接的语法格式

先把字串里面的写入”#一段id”,之后找到目标的标签，在其之后加上”id=”这段id的名字””就可以实现锚点跳转。

注释标签

特殊字符

- 重点记住空格和大于小于号。

1.表格标签

1.1表格的主要作用

1.2表格的基本语法

1.2表格属性(到这里去练习一下)

1.3表格结构标签

音频文件

视频文件