文章目录
- HTML 概述
- 学HTML到底学什么
- HTML的基本结构
- HTML的注释的作用
- html的语法
- HTML的常用标签:
- 相关单词
- 参考资料
HTML 概述
英文全称:Hyper Text Markup Language
中文:超文本标记语言,就将常用的50多个标记嵌入在纯文本中,实现超文本效果的语言。
超文本:在纯字符中嵌入样式、图片、音频、视频、超链接等内容
标记也称为标签,如:
<div>hello</div>
注意:作为一门计算机语言,HTML与Java、C、PHP不同,没有循环、选择等基本语言结构,只有纯文本和标签。
学HTML到底学什么
学50多个常用的标签,和它们的用法(写法、语法)
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>
HTML的注释的作用
<!--注释内容-->
快捷键:ctrl+/
- 说明这行代码是干嘛的,给程序员看的,人
- 不让代码执行 给机器看的
html的语法
(1)一篇HTML文档就是一个文本文档,其中包含 “纯文本”+“标签”
(2)HTML中的标签分为两种:
双标记标签: <标签名>内容</标签名>
单标记标签: <标签名 /> 单标记标签中不能包含内容
(3)标签之间可以嵌套,但不能交叉。块状元素可以嵌套行内元素,反之不行(XTHML)
(4)标签名不区分大小写,但有个版本的HTML要求全小写,推荐全用小写
(5)标签可以声明属性,属性有属性名和属性值,属性值需要使用单引号或双引号括起来
(6)不同的标签具有不同的属性,所有的标签都具备下列四个属性:
-id:整个文档每个标签可以声明一个唯一的id号
-style:为元素指定CSS样式
-class:指定元素所属的类型
-title:指定标签的弹出式提示语
id,class可以随便写,但是写英文、数字、下划线、-。等学了css就有用了
style,写样式的,不能乱写,只能写以后要学的样式,按规范来
title里面可以乱写,表示鼠标悬浮时的提示信息
W3C标准(http://validator.w3.org/)
W3C是html标准的制定组织,编写的html可以通过打开以上链接进行校验
HTML的常用标签:
标签都有一定的语义化,不同的标签用来表示或放置不同的内容。
1、标题标签(header)
<h1></h1>
<h6></h6>
2、段落标签(paragraph)
<p></p>
3、换行标签(break row)(主要用于文字换行中)
<br>
4、水平线标签(horizon)
<hr>
5、块级标签(division)
<div></div>
使用频率非常高,但是没啥语义化的标签,主要是用来划分区域的
是块级标签的代表,当你不知道要用何种标签包裹内容时,就用它
6、行内标签的代表(span: 桥墩)
<span></span>
使用频率非常高,但是没啥语义化的行内标签,主要是用来分割包裹某些内容,方便加样式等
7、文本格式化标签(双标记、行内标签)
a. 加粗
1. <b>要加粗的文字</b> 单词: bold
2. <strong>要加粗的文字</strong>
区别:(面试题)
外观都一样,都是将文字加粗
b标签仅仅只是将文字加粗
strong表示内容的强调,意思是该文字很重要
b. 斜体
1. <em>要变斜体的文字</em>
2. <i>要变斜体的文字</i> //已经被废弃了
i===> italic
区别:(面试题)
外观都一样,都是将文字变斜体
i标签仅仅只是从外观上变斜体,不强调内容
em表示内容的强调,意思是该文字很重要
c. 下划线
1. <u>要添加下户线的文字</u> --被废弃了
u===> underline
2. <ins>下划线</ins>
ins===>insert 插入
d. 删除线
<del>要添加删除线的文字</del>
del===>delete
8、链接
<a href="url地址:路径">链接</a>
a===>anchor 锚点
作用:跳转页面
外观:蓝色+下划线
属性:href 资源引用地址 是a链接的属性,该属性的值是网址
url地址:相对路径、绝对路径
其他作用:
1.链接
2.下载
3.锚点
属性2:target="_blank"
作用:希望让链接在新窗口中打开,则添加该属性
<a href="url" target="_blank">链接</a>
url:网址,官方:统一资源定位符
blank:新窗口、空白
target:目标
9、列表
```html
用于实现新闻列表、产品列表、电影列表、菜品列表。。。
1.有序列表(排名分先后,会有数字的)
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
...
</ol>
ol里面有li标签组合而成。同时出现,不能拆分,ol只能有一个,li标签可以写多个
ol===> order list
li===> list item 列表项
属性:
type="1|a|A|i|I" 排序的符号
start="5" 排序开始的数字
2.无序列表(排名不分先后,没有数字)
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
...
</ul>
type="disc|circle|square" 排序的符号
实心小圆点|空心圆|正方形
属性:
type="disc|circle|square"
注意:
ol,ul里面只能放li标签,不能放其他的,但是li标签中可以放任意的标签
3.自定义列表(没啥存在感)
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表项</dd>
<dd>自定义列表项</dd>
</dl>
```
10、图片标签(image)
第一个多媒体标签(超文本)
<img src="图片的路径url">
HTML中的路径:(url)
url:统一资源定位符
../ 表示上一级
直接写文件夹 表示同级目录
文件夹/文件夹/ 下一级目录
<img src="img/re.jpg"> //同级目录下的img文件夹下的re.jpg
<img src="机器猫.jpg"> //同级目录中找
<img src="../111.jpg">//往上一级找111.jpg
<img src="../html/img/01.jpg"> //往上一级找到html下的img文件夹下的01.jpg文件
相关单词
-
b,strong,em,i,del,ins,a,target
-
type 类型
-
start 开始
-
HTML相关标签就相当于是一个个的单词,只是部分是简写的
参考资料
HTML 标签参考手册 - 功能排序:https://www.w3school.com.cn/tags/html_ref_byfunc.asp
如需本次课作业、笔记、案例等,请在下方+微获取。