部分关于html的基础

关于HTML

HTML含义

HTML的英⽂文全称是 Hyper Text Markup Language，超文本标记语言。 HTML是构建⻚面的标记，它用于承载网站的内容，如：文本、图片、⾳频、视频等。

HTML和网⻚

HTML的标签和纯文本按规则的组成成为一个“⽹页”。

 <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style></style>
</head>
<body>

</body>
</html>

分割线

<!DOCTYPE html> 不是html语⾔言标签，是文档声明，是指定了web浏览器器关于页面使用哪个html版本进⾏编写指令， html是html5的版本。
<html></html> 整个⽂文档的内容 lang 属性的意思是告诉浏览器器⽂文档语⾔言， en是英⽂文内容，中⽂文zh。
<head></head> 标签的作用和它⾥面的标签，描述用的标签，链接样式表等。
<meta/> 标签是head部的一个辅助性标签。它并不会显示在⻚面上，可⽤用于浏览器（如何显示内容或重新加载⻚面）、搜索引擎（SEO）、或其他 web 服务。其
中 <meta charset="UTF-8"> ⽹页制作所使用的字符集，就是⽹页使⽤何种文字以及语言。
<title>⽂文档标题</title> 文档标题，显示在浏览器标签栏中，搜索引擎会比较在意这个标签的内容，它会是搜索引擎判断的依据。
<body></body> 标签的作用和主要承载标签，显示给用户的内容。

    标签书写规则
  • 标签名使⽤用⼩小写
  • 双标签成对出现，建议关闭所有HTML元素``
  • 单标签在html5规范中可以省略略 /，现在的HTML要写在后面``
      • 标签和元素
  • 标签（tag）有意义的标记，可以被浏览器器读取，并具备一些功能。浏览器按照标签的功能和含义去显示它。
  • 元素（element） html文档由很多元素组成，由标签和属性以及内容组成,标签包含在元素中
      • 标签性质
  • 块级元素(block) 一般用来搭建⽹网站架构、布局、承载内容，特点自占⼀行，从上向下排列，可以设置元素的宽度和高度。
  • 内联元素（inline）一般用在⽹网站内容之中的某些细节或部位，⽤用以“强调、区分样式、上标、下标、锚点”等等，特点不不⾃自占一⾏从左向右排列列，设置宽度⾼度⽆ 效，除特殊的内联块（img、 button、 input等）。个人理解就是半CSS，不会自己占一行
    • 我是⼀个块级元素，我⾃己占⼀⾏

    我也是⼀个块级元素，我⾃己占⼀⾏

    我是⼀个内联元素，我不自占⼀⾏ 我也是一个内联元素，我也不自占⼀⾏

    image

    5属性书写规则

      html标签的属性可以配置元素或者以各种⽅方式来调整元素的⾏行行为，进⽽而满⾜足⽤用户所需的标准。
  • 标记和属性⽤用空格隔开，属性与属性值⽤用 = （等号）链接，属性值要写在""(双引号内),等号两侧尽量量不不⽤用空格
  • 使⽤用⼩小写属性名
  • 一个标记可以没有属性也可以有多个不不同属性，属性与属性之间不不分先后顺,一个属性也可以有多个属性值
    • `

    example

    `

    6文件加载规则

    浏览器有专门的html解析器器，浏览器是自上而下解析的。顺序加载，整个⻚面的标签。

    7标签嵌套规则

    块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
    块级元素不不能放在<p>⾥面,p标签是段落标签。
    有几个特殊的块级元素，它们内部只能包含内联元素，不能再包含块级元素 h1、 h2、 h3、 h4、 h5、 h6(标题)、 p（段落）、 dt（列表标题）

  • 空⾏和空格在⻚面上都代表一个空格的⼤小 **缩进，标签**缩进可以让结构（包裹嵌套关系）更更加清晰，也是书写规范。

    8HTML注释
    <!-- wirite something -->
    作用,隐藏代码，提示作用，划分区域

    9HTML字符实体

    像“<”和“>”这类符号已经⽤来表示HTML标签，因此就不能直接当作文本中的符号来使用。
    有些字符在ASCII字符集中没有定义，因此需要使⽤用转义字符串来表示。
    image

    基础元素

    基础元素
    所有需要显示在⻚面上的标签都需要写在 <body></body> 标签中

    标题标签

    h1~h6标签，⽤于书写标题，h7是其他作用。
    <h1>文本</h1> 标题标签是双标签，可以包裹⽂本
    属于块级元素 ，在浏览器中自占一⾏的标签
    浏览器自⾏渲染时标题标签和其他的标签保持一定的上下距离，并有自定义的加粗效果
    级别是数字越小级别越⼤

    <h1>⼀一级标题</h1>
<h2>⼆二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

    效果：

    一级标题

    二级标题

    三级标题

    四级标题

    五级标题
    六级标题

    <p></p> 标签，⽤于书写段落或大段⽂字
    属于 块级元素 ，在浏览器中自占⼀行的标签
    浏览器⾃行渲染时p标签和其他的标签保持一定的上下距离

    <p>在这⾥面写一些⽂字的东西。 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    换行标签

    <br/>标签，⽤于在段落中将⽂字换行。
    <br/>标签单标签，属于 块级元素 自占一行的标签,在html5标准中可以省略 / ,直接写

    换⾏标签多用于段落中的换行，一般不用于布局。

    分隔符

    <hr/> 标签用于将标题和段落，或其他需要分开的段落⽤一条横线分开。
    <hr/>标签单标签，属于块级元素⾃占⼀行的标签,在html5标准中可以省略略 / ,直接写 <hr>
    hr是单标签，⾃占⼀行的标签。
    一般不用于布局。

    <h1>这是一个标题</h1>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

    预格式化标签

    <pre></pre> 标签可定义预格式化的文本，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。
    <pre>段落</pre> 标题标签是双标签，可以包裹⽂本和其他标签
    属于块级元素，在浏览器中⾃占⼀行的标签
    如果想在⻚面中显示标签，则需要搭配实体符号解决，⽐比如 "<" 代表 "<"， ">" 代表 ">"
    pre标签的一个常见应用就是用来表示计算机的源代码

    格式化文本标记

    具有一定格式的文本标记，专门用于修饰文字
    均为双标签，内联元素，不自占⼀行

    <b>定义粗体</b>
<i>定义斜体</i>
<u>定义下划线</u>
<del>定义删除线 </del>
<sup>定义上标</sup>
<sub>定义下标</sub>
<strong>定义着重⽂文字，与b效果相同</strong>
<em>定义加重语⽓气，与i效果相同</em>
<mark>⾼高亮显示⽂文本</mark>

按钮标签

    <button>按钮</button> 普通的按钮标签，不具备任何功能，可以自主赋予功能具有⾃己的样式，可以自定义修改。
    双标签，按钮内部可以包裹⽂本。 “特殊的”内联元素，可以设置宽度高度，不⾃占⼀行。

    <button> 按钮 </button>

    分区元素

    div标签

    <div></div> 标签，双标签，可以包裹任何标签和⽂本。
    为块级元素，自身没有任何样式。
    经常作为容器和分区域的包裹标签使用，在布局中应用广泛

    <div>直接写⼀段文字是可以的</div>
<div>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</div>

    span标签

    <span></span> 标签，双标签，可以包裹⽂本。
    为内联元素，⾃身没有任何样式。
    常作为容器使用，用于包裹特殊的文字和图标。

    <span>123</span>
<p>html的重要性？ 评论人数： <span style="color: red;">10</span></p>

    全局属性

    全局属性是所有HTML元素共有的属性。它们可以用于所有元素，即使属性可能对某些元素不起作用。
    要满足属性的书写规则： - 标记和属性用空格隔开，属性与属性值用 = （等号）链接，属性值要写在""(双引号内),等号两侧尽量不用空格 - 使⽤用小写属性名 - 一个标记可以没有属性也可以有多个不同属性，属性与属性之间不分先后顺,一个属性也可以有多个属性值

    `<p id="str" class="atv">example</p>`
<h1 style="font-size:30px;color:red;">一个30px大小的红色标题</h1>

    font-size是第一个样式和值，color是第二个属性和值

    style属性，含要应用于元素的样式声明，可以给元素指定样式。
    可以设置多个样式，每个属性值⽤分号隔开。
    注意，该属主要用于快速样式化，⽤用于测试目的。

    <h2 style="color: red;">标题</h2>
<p style="color: blue;font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

    id属性

    定义唯一标识符（ID），在该⻚面上一个标签只能有一个不重复的id名，它具有唯一性。
    id属性的值不能是数字开头，不建议写中文。值的书写规范如：
    d="abc" 纯字⺟母
    id="abc123" 字⺟母+数字
    id="head-logo" 中横线链接
    id="head_logo" 下横线链接
    id="headLogo" 驼峰式

    <p id="text">这是一段话</p>
<p id="text1">这是一段话</p>

    class属性

    class类属性，可以将元素进⾏分类后给予相同的样式，减少了代码的书写量
    该⻚面上可以有多个元素拥有此类名，一个元素也可以有多个类。 - class选择器名称不能是数字开头，不建议写中文，可以是多个类名⽤用空格隔开。
    值的书写规范与id相同

    <p class="aaa">⼀一段⽂文字</p>
<p class="aaa">⼀一段⽂文字</p>
<p class="aaa bbb ccc">⼀一段⽂文字</p>

    data-*⾃自定义属性

    data-* 是⾃定义数据属性，可以通过JavaScript与 HTML 之间进行专有数据的交换
    data-* 这里的 * 可以替换为自定义的有意义的字母或单词,如： data-buy

    <p data-price="yes">需要将这个标签设置为价格</p>

    title标题属性

    包含表示与其所属元素相关信息的文本。
    这些信息通常可以作为提示呈现给用户,但不是必须的。

    <p title="李白将进酒">天生我材必有用，千金散尽还复来。 </p>

    功能元素

    目录结构

    文件交和文件路径，路径的地址

    URL

    URL统一资源定位符Uniform Resource Locator，我们俗称的“网址”。可以用来标识网络上的任何资源
    也可以叫做“路径”，找到目标位置的路线
    路径在web⻚面的三种主要形式

    绝对路径
    相对路径
    根相对路径

    绝对路径

    完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

    访问网络资源

    在⽹网站中类似以 http://www.zyncode.net/index.html 种⽅方式来确定⽂文件位置的⽅方式也是绝对路路径。

    <a href="http://www.baidu.com">去百度</a>
<img src="http://img3.imgtn.bdimg.com/it/u=2074778619,2802428734&fm=26&gp=0.jpg"/>

    访问本机资源
    从盘符位置处⼀一层⼀一层查找，直到找到⽂文件名为⽌止 E:\HTML5BASIC\Images\login.png

    相对路径

    相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML⽹页文件为起点，通过层级关系描述目标图像的位置。

    同⼀文件夹

    图像⽂件和html文件位于同一⽂件夹：只需输入图像文件的名称即可或 ./ ，如 ， 在html文件中可以不加 ./

    下⼀级文件夹

    图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用"/"隔开，如:

    上一级文件夹

    图像文件位于html文件的上一级文件夹：在文件名之前加入"../"，如果是上两级，则需要使用"../../"，以此类推，如

    • posted @ 2021-07-05 08:32  cansliang  阅读(72)  评论(0)    收藏  举报