初识HTML
一、HTML是什么?
HTML4.01
发布于1999年;
HTML5
草案发布于2008年,正式的发布时间是2014年;
HTML
被称为超文本标记语言,英文全称Hyper Text Markup Language,标准通用标记语言下的一个应用。不是一种编程语言
二、HTML的基本结构
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
:文档声明部分(告诉浏览器,我,HTML是超文本标记语言,你,要按照我的规矩来办事。)
html
:网页的根标签,放在最外层,一个网页中只会出现一次。
lang=" en"
:规定当前语言类型为英文。
lang=" zh"
:规定当前语言类型为中文。
head
:网页头部,主要用于记录网站的相关信息等。
<meta charset="UTF-8">
: 统一字符编码。
<title>Document</title>
:网页的标题。
body
:网页的主体内容,主要代码的编辑区域,用于展示网页的内容。
三、HTML的基本语法
- 所有的标签都应该包含在
< >
起止符之间; - 大部分的标签都有开始标签
< >
和结束标签</>
; - 标签可以拥有属性,属性总是以
属性名 = ‘属性值’
这样以键值对出现,多个属性就通过空格隔开; - 标签可以嵌套;
- 标签名建议用小写
HTML
文档的后缀名为.html
或者.htm
;- 注释
<!-- 注释内容 -->
该内容不会被浏览器渲染,主要用于文档的说明。 - 注释快捷键说明:
单行注释:Ctrl + /
选中注释:Atl + Shift+ A
四、常见HTML的标签
h1~h6
:
<h1>标题标签</h1>
标题标签
效果是加粗和字体大小的变化。
p
:
<p>段落标签</p>
:段落标签
主要用于文本展示。
div
:
<div>块级标签</div>
:块级标签没有意义的标签,一般用于布局。
span
:
<span>文本标签</span>
: 文本标签,没有意义的标签,一般用在需要突出显示文字的时候。
b
:
<b>文字加粗标签</b
: 文字加粗标签,一般不建议使用,加粗效果可以通过 css 实现。
strong
:
<strong>拥有文字加粗效果</strong>
: 拥有文字加粗效果,还有语气加重的含义。
i
:
<i>文字斜体效果</i>
: 文字斜体效果,不建议使用,可以通过 css 实现。
em
:
<em>文字斜体,有语气加重</em>
: 文字斜体,有语气加重。
small
:
<small>比</small>
比一般的文字小一点。
sub
:
下标:X<sub>2</sub>
: X 2 。
sup
:
上标:X<sup>2</sup>
: X 2 。
del
:
<del>被删除的文本</del>
:被删除的文本。
(一)HTML的超链接
在超文本标记语言 HTML 中超链接是使用 a 标签 <a></a>
在超链接中所拥有的部分属性如下:
href
默认进行链接的跳转,设置跳转地址的时候必须加上域名;
超链接:<a href="http://www.baidu.com">百度</a>
执行JavaScript代码:<a href="javascript:alert(123);">执行 JS 代码</a>
打电话:<a href="tel:13562698714">打电话</a>
发短信:<a href="sms:13562698714">发短信</a>
发邮件 :<a href="mailto:fay@163.com?subject=邮件主题&bodu=邮件内容">发送邮件</a>
target
:一般用于链接跳转,代表当前打开的链接在什么位置显示。
_blank
:在新标签页打开;
_self
:在当前标签页打开;
_top
:在顶层窗口打开;
_parent
:在窗口打开;
title(绝大部分标签都有该属性)
鼠标停留在该标签上时,会显示的文字。
(二)HTML的img标签
<img> 或者 <img/>
是一个单标签
<img src="图片地址" alt="描述">
src
:
图片地址。
alt
:
<img src="图片地址" alt="这是一个有问题的图片">
主要用于图片损坏的情况下对图片的说明
绝对地址:
https://static.linktarget.top/images/self/test.jpg
<img src="https://static.linktarget.top/images/self/test.jpg" alt="网络中的绝对地址">
网络中的绝对地址
相对地址(地址命名格式):
1、兄弟关系,直接写“图片名”.后缀名
;
2、图片的父级与文件是兄弟关系,图片所在“文件夹名” / “图片名”.后缀名
3、图片与文件的父级是兄弟关系,../
图片名.后缀名
../
表示返回上一级
(三)HTML的媒体
音频
audio
支持格式为 MP3,wav,ogg;
controls
:控制工具属性;
loop
: 循环;
muted
: 静音;
autoplay
:自动播放,但是目前绝大多数浏览器禁用。
视频
video
支持MP4;
controls
:控制工具属性;
loop
: 循环;
muted
: 静音;
autoplay
:自动播放,但是目前绝大多数浏览器禁用。
五、HTML标签的嵌套规则
- 原则上块级标签可以嵌套块级标签和内联标签;
- 内联标签原则上只能嵌套内联标签;
p
标签和h1~h6
标签 只能嵌套内联标签;ul
标签 和ol
标签 只能嵌套li
标签li
标签可以嵌套任何标签;
六、HTML语义化标签
(一) 语义化
根据内容的结构,选择合适的标签,便于开发者阅读和机器的阅读,从而写出更加优雅的代码,为浏览器的爬虫和机器更好的解析。
(二) 新增了一些语义化标签
- header: 定义文档或者章节头部。
- nav:定义导航链接部分。
- footer: 用于定义文档或者章节的底部。
- article: 用于定义文档的文章(帖子、新闻、博客)。
- section: 用于定义一个文档的章节(大块中的小部分)
- aside: 用于定义与当前页面文章内容无关的附属信息。
- address:用于地址
以上标签都是块级标签
七、表格
(一)涉及的标签
table
: 用于定义表格;
caption
:用于定义表格标题;
th
: 用于定义列标题,文字自动居中且具有自动加粗;
tr
:定义行;
td
:定义单元格;
thead
: 表格头,一般不用;
tbody
:表格主题,一般不用;
tfoot
:表格底部,一般不用;嵌套规则: table只能嵌套 tr 或者 caption; tr 只能嵌套 td 或者 th; td 或者 th 能嵌套任意标签;
(二)标签的属性
table
的属性(一般不建议使用)
boder
:只能设置1
或者' '
,1
代表有边框线;
cellspacing
: 单元格与单元格之间的间隙;
cellpadding
: 单元格内部填充的一个空白;
td 属性
colspan
: 同一行合并;
rowspan
: 同一列合并;
注意: 如果单元格中没有内容,出现该单元格被压缩的情况,那么在当前单元格内写上
(三)表格演示
<table >
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th colspan="2">星期六</th>
<!-- <td>星期日</td> -->
</tr>
<tr>
<td rowspan="2">星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<!-- <td>星期一</td> -->
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
</table>
效果如下
星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | |
---|---|---|---|---|---|---|
星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期日 |
星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期日 | |
星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期日 |
星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期日 |
八、表单
表单
在网页上提供一个图形界面,用以手机用户数据
input
常用到的基本属性
text
: 普通文本输入框password
: 密码框radio
: 单选框, 同一个组的但选项需要设置相同的name属性值;checkbox
:复选框placeholder
: 内容提示占位符checked
: 属性默认选中;偶尔用到:
range
: 进度条、播放条file
: 上传按钮;不怎么用的:
emai
l: 代表邮箱输入框ur
l: 地址输入框number
: 数值输入框有意思的:
date
: 显示日期time
: 时间color
: 拾色器
label:
for
属性:该属性值为表单元素的 id- 提示:id是所有标签都有的一个属性,并且该值唯一;
textarea
: 文本域 or 多行文本输入框
select & option
:下拉选择框
selected
默认选中
button
拥有的属性:
button
: 普通的按钮
reset
: 重置
submit
: 提交数据
<label>
密码:
<input type="password" placeholder="请输入密码">
</label>
<select name="" id="">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="chengdu">成都</option>
</select>
九、锚点的使用
主要用于页面内,类似于目录的跳转
<!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">
<title>十五、锚点的使用</title>
</head>
<body>
<a href="#a">aaa</a>
<a href="#b">bbb</a>
<a href="#c">ccc</a>
<hr>
<p id="a" style="height: 600px;">锚点a</p>
<p id="b" style="height: 600px;">锚点b</p>
<p id="c" style="height: 600px;">锚点c</p>
</body>
</html>
十、内联框架
iframe
简单应用方式
十一、实体符号
空格 | 大于符号 | 小于符号 | &符号 | |
---|---|---|---|---|
书写方式 | ` & nbsp;` | & gt; | & lt; | & amp; |
呈现结果 | ` ` | > | < | & |
• 符号 | » 符号 | ® 符号 | © 符号 | |
书写方式 | & bull; | & raquo; | & reg; | & copy; |
呈现结果 | • | » | ® | © |
十、列表
有序列表
<ol> <li></li> </ol>
无序列表
<ul> <li></li> </ul>
ol 或者 ul 中只能包含<li></li>
标签
十二、标签的分类
(一) 按文档流分为 两大类型
内联标签:
- 不会独占一行;
- 从左往右依次排列,直到当前行排列不下的时候就会换行;
- 宽度由内容决定;
- 包含:span、a、img、strong、i、em、b
块级标签:
- 独占一行;
- 排列从上往下依次排列;
- 宽度由父元素的宽度决定,为父标签宽度的 100%
- 包含:h1~h6、div、p、ul、ol、li
(二)按功能分类为 四大类
- 以
<div></div>
为代表的 块级标签- 以
<span> </span>
代表的 内联标签- 以
<a></a>
代表的 超链接标签- 以
<img></img>
为代表的 图片标签
(三) 标签嵌套规则
- 原则上块级标签可以桥套块级标签和内联标签;
- 内联标签原则上只能嵌套内联标签;
- p 和 h1~h6 只能嵌套内联标签;
- ul 和 ol 只能嵌套 li可以嵌套任何标签;
前往 CSS
后续内容持续更新中,以上内容用于自我总结。