【HTML01】HTML基础-基本元素-附带案例-作业

文章目录

- - - 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文件复制

参考资料

HTML 标签参考手册 - 功能排序：https://www.w3school.com.cn/tags/html_ref_byfunc.asp

如需本次课作业、笔记、案例等，请在下方+微获取。
在这里插入图片描述

	<!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>

	1. <b>要加粗的文字</b> 单词： bold
	2. <strong>要加粗的文字</strong>
	区别：（面试题）
	外观都一样，都是将文字加粗
	b标签仅仅只是将文字加粗
	strong表示内容的强调，意思是该文字很重要

	1. <em>要变斜体的文字</em>
	2. <i>要变斜体的文字</i> //已经被废弃了
	i===> italic
	区别：（面试题）
	外观都一样，都是将文字变斜体
	i标签仅仅只是从外观上变斜体，不强调内容
	em表示内容的强调，意思是该文字很重要

	1. <u>要添加下户线的文字</u> --被废弃了
	u===> underline
	2. <ins>下划线</ins>
	ins===>insert 插入

	<a href="url地址：路径">链接</a>
	a===>anchor 锚点
	作用：跳转页面
	外观：蓝色+下划线
	属性：href 资源引用地址是a链接的属性，该属性的值是网址
	url地址：相对路径、绝对路径

	其他作用：
	1.链接
	2.下载
	3.锚点

	属性2：target="_blank"
	作用：希望让链接在新窗口中打开，则添加该属性
	<a href="url" target="_blank">链接</a>
	url:网址，官方：统一资源定位符
	blank:新窗口、空白
	target:目标

	```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>
	```

	../ 表示上一级
	直接写文件夹表示同级目录
	文件夹/文件夹/ 下一级目录

	<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文件

	<!--注释内容-->
	快捷键：ctrl+/

	<h1></h1>
	<h6></h6>

	<del>要添加删除线的文字</del>
	del===>delete