HTML基础

【一】HTML简介

【1】什么是HTML

超文本标记语言
如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
超文本就是网页上不光有文本，还有图片、音乐、视频等。
标记语言是一套标记标签 (markup tag) div，span，font，i等标记
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面，是以.html结尾的文件
HTML的主要目的：通过一系列的标记，来显示网页的不同效果、不同部分。

【2】最基础的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hellow zhangsan</h1>
<a href="https://www.baidu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7"
     alt="my wifi">
</body>
</html>

【二】HTML中的注释语法

由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

【1】单行注释

<!-- 单行注释 -->

【2】多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

【三】HTML的文档结构

【1】基础结构

<html>
    <head></head>:head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>:body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

【2】基本结构

HTML的文档结构通常遵循以下基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html>   //告诉浏览器后面的代码是html代码
<head>   //告诉浏览器当前网页如何显示，如编码，关键词
</head>
<body>  //告诉浏览器这里是主体部分，显示到网页中
</body>
</html>   //html结束


<!DOCTYPE html>：声明文档类型,告诉浏览器我的当前页面是那个版本的html
<html></html>：告诉浏览器，其中的代码用的什么格式；
<head></head>：告诉浏览器，这是网页的头部，包括了定义网页的一些内容的标签，如：标题、字符集等
<meta>：就是定义网页字符集、描述、关键词等内容的。
如：<meta charset=”utf8”>  字符集：功能：告诉浏览器，如何翻译汉字。
<meta name=”keywords” content=”html,css,javascript”>   关键词
http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。
Content-type：内容类型。
Content：详细内容类型介绍。
Text/html：网页是text格式，html是文本中的小格式。
Charset：字符集，主要控制汉字如何显示。
Utf-8：多国语言编码，什么国家的语言都可以正常显示。
<title></title>：当前网页的标题，在网页中是必须的
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时的标题
显示在搜索引擎结果中的页面标题 
<body></body>：网页的主体部分,网页中主要内容都要写到body里。

【四】HTML标签的分类

根据标签的闭合情况，可以分为单标签和双标签

【1】双标签

有头有尾
内容写在中间

<h1></h1>
<a href==""></a>

【2】单标签(自闭标签)

标签自己闭合，不需要另一半标签

<img/>

【五】标签

【1】head常用标签

<head>
    <!-- 默认编码格式 -->
    <!-- <meta charset="UTF-8">-->
    <meta charset="UTF-8" name="keywords" content="关键词">
    
    <!-- 控制页面上显示的小标题 -->
    <title>这是一个title标签</title>
    
    <!-- 这里面写CSS装饰代码 -->
    <style></style>
    
    <!-- 这里写JS代码，JavaScript -->
    <script></script>
    
    <!-- 用来引入外部CSS文件 -->
    <link rel="styleshhet" href="">
</head>

【2】Body常用标签

<body>
<!--标题标签-->
    <h1>【一】标题标签</h1>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h6>六级标题</h6>
    标题标签只能到 1 ~ 6 级，没有 7 级标题
    <h7>七级标题</h7>
    
    <h1>【二】文字相关的标签</h1>
    <h2>【1】加粗文字</h2>
    <p>这是没有加粗的文字</p>
    <b>这是加粗的文字</b>
    <h2>【2】字体倾斜</h2>
    <i>这是倾斜的文字</i>
    <h2>文字带下划线</h2>
    <u>这是带下划线的文字</u>
	<h2>【4】文字带删除线</h2>
	<s>这是带删除的文字</s>
    
    <h1>【三】段落标签</h1>
    <p>
        白日依山尽,
        黄河入海流。
    </p>
    <hr>
<h1>【四】换行标签</h1>
<p>
    白日依山尽,
    <br>
    黄河入海流。
</p>
<hr>
<h1>【五】水平分割线</h1>
<hr>

</body>

【3】块级标签和行内标签

<h1>【一】块级标签</h1>
<h2>【1】介绍</h2>
<p>块级标签指的是占一行的HTML元素标签</p>
<h2>【2】常用的块级标签</h2>
<div>这是div标签</div>
<p>这是p标签</p><p>这是p标签</p>
<h6>这是级别标签</h6>
<ul>这是ul标签</ul>
<ol>这是ol标签</ol>
<table>这是table标签</table>

<h1>【二】行内标签</h1>
<h2>【1】什么是行内标签</h2>
<p>值在一行内现实的HTML元素,它们不会打断当前行并且只占据所需的内容宽度。</p>
<h2>【2】常见的行内标签</h2>
<span>这是span标签</span><span>这是span标签</span>
<br>
<p>行内标签两个标签在一行不会换行，块级标签两个标签在一行会自动换行</p>
<a href="https://juejin.cn/">这是一个超链接标签</a>
<br>
<strong>这是strong标签</strong>
<br>
<em>这是strong标签</em>
<br>
<img src="picture.jpg" alt="这是img标签">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>【一】块级标签</h1>
<h2>【1】介绍</h2>
<p>块级标签指的是占一行的HTML元素标签</p>
<h2>【2】常用的块级标签</h2>
<div>这是div标签</div>
<p>这是p标签</p><p>这是p标签</p>
<h6>这是级别标签</h6>
<ul>这是ul标签</ul>
<ol>这是ol标签</ol>
<table>这是table标签</table>

<h1>【二】行内标签</h1>
<h2>【1】什么是行内标签</h2>
<p>值在一行内现实的HTML元素,它们不会打断当前行并且只占据所需的内容宽度。</p>
<h2>【2】常见的行内标签</h2>
<span>这是span标签</span><span>这是span标签</span>
<br>
<p>行内标签两个标签在一行不会换行，块级标签两个标签在一行会自动换行</p>
<a href="https://juejin.cn/">这是一个超链接标签</a>
<br>
<strong>这是strong标签</strong>
<br>
<em>这是strong标签</em>
<br>
<img src="picture.jpg" alt="这是img标签">

</body>
</html>

块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
块级标签内部可以嵌套任意的块级标签和行内标签
- 但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
- 如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
小结
- 只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
行内标签不能嵌套块级标签可以嵌套行内标签

- ## 文本修饰标记

l <br/> ：换行，在需要换行的标记后面添加br标记就可以了

l <hr/>：水平线

v hr常用的属性：

Size：粗细   值：1-100

Color：颜色      值：颜色

Width：宽度     值：数值(固定)或百分比(根据浏览器的窗口大小自动调整)

百分比一般用于响应式网站的开发

l <h1>------<h6>标题标记：双标记，自动换行和加粗

l <p></p>：段落标记

l <pre></pre>：预排版标记

- ## 排版标记

l <br/> ：换行，在需要换行的标记后面添加br标记就可以了

l <hr/>：水平线

v hr常用的属性：

Size：粗细   值：1-100

Color：颜色      值：颜色

Width：宽度     值：数值(固定)或百分比(根据浏览器的窗口大小自动调整)

百分比一般用于响应式网站的开发

l <h1>------<h6>标题标记：双标记，自动换行和加粗

l <p></p>：段落标记

l <pre></pre>：预排版标记

【六】标签的两个重要属性

<div id="" class="">
    <p>id属性:相当于你在整个页面上的唯一标识</p>
    <p>class属性，可以放很多个样式或者是装饰</p>
</div>

【七】列表标签

<h1>【一】无序列表</h1>
<ul>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
</ul>

<h1>【二】有序列表</h1>
<ol>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
</ol>

<h1>【三】标题列表</h1>
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

【八】特殊符号

【1】空格

&nbsp;

【2】大于号`>`

&gt;

【3】小于号`<`

&lt;

【4】&符`&`

&amp;

【5】￥符`¥`

&yen;

【6】版权`©`

&copy;

【7】商标`®`

&reg;

【小结】

特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
- 版权符号：©，表示方法为 © 或者 ©。
- 注册商标符号：®，表示方法为 ® 或者 ®。
- 商标符号：™，表示方法为 ™ 或者 ™。
- 惊叹号：！，直接输入 "!" 即可。
- 问号：？，直接输入 "?" 即可。
- 减号：-，直接输入 "-" 即可。
- 加号：+，直接输入 "+" 即可。
- 百分号：%，直接输入 "%" 即可。
- 等于号：=，直接输入 "=" 即可。
- 乘号：×，表示方法为 × 或者 ×。
- 除号：÷，表示方法为 ÷ 或者 ÷。
- 分号：；，直接输入 ";" 即可。
- 冒号：：，直接输入 ":" 即可。
- 单引号：'，直接输入 "'" 即可。
- 双引号："，直接输入 """ 即可。

【九】常用标签

【1】div标签

它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。

【2】span标签

它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
Span标签通常用于对特定部分进行样式修饰或添加特殊效果
- 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。
在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
可以把div标签看成一块区域
- 也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
普通的文本先用span占位
- 然后再去装饰页面

【3】img标签

图片标签

<img src="" alt="" title="" height="" width="">

src
- 存放图片的路径(可以是本地也可以是网页链接)
alt
- 当图片加载不成功时，加载出的图片描述性信息
title
- 当鼠标悬浮在图片上面之后，自动展示图片信息
height/width
- 高度和宽度
- 当你在调整其中一个参数时，另一个参数也会等比例缩放
- 当在调整两个参数而不考虑比例时，就会造成图片的失真

【4】a标签

链接标签

<a href="" target="_blank"></a>
<a href="" target="_self"></a>

href
- 指定 url 用户点击该链接就会跳转到目标链接
  - 当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
  - 当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
- 可以放其他标签的id值，点击即可跳转到对应的标签位置
target
- _self
  - 默认 a 标签是在当前页面完成跳转
- _blank
  - 跳转到新建的标签页

a标签的锚点功能

比如点击一个文本标题，自动跳转到标题对应的区域

<a href="" id="d1">顶部</a>
  <a href="" id="d2">中间</a>
  <a href="" id="d3">底部</a>

  <a href="#d1">回到顶部</a>
  <a href="#d2">回到中间</a>

【5】总结

Div标签用于对页面进行布局和结构划分
而Span标签则更多地用于对文字或一小段文本进行样式控制。
根据需要，可以通过设置不同的class或id来给这些标签添加样式，并使用CSS来对其进行进一步的控制和美化。

posted @ 2024-03-10 19:37 Fredette 阅读(75) 评论(0) 收藏举报

刷新页面返回顶部

Fredette

HTML基础

【一】HTML简介

【1】什么是HTML

【2】最基础的页面

【二】HTML中的注释语法

【1】单行注释

【2】多行注释

【三】HTML的文档结构

【1】基础结构

【2】基本结构

【四】HTML标签的分类

【1】双标签

【2】单标签(自闭标签)

【五】标签

【1】head常用标签

【2】Body常用标签

【3】块级标签和行内标签

【六】标签的两个重要属性

【七】列表标签

【八】特殊符号

【1】空格

【2】大于号>

【3】小于号<

【4】&符&

【5】￥符¥

【6】版权©

【7】商标®

【小结】

【九】常用标签

【1】div标签

【2】span标签

【3】img标签

【4】a标签

【5】总结

公告

【2】大于号`>`

【3】小于号`<`

【4】&符`&`

【5】￥符`¥`

【6】版权`©`

【7】商标`®`