HTML结构-one

一只符华单推人

已于 2022-05-25 18:31:24 修改

阅读量325

点赞数

分类专栏： HTML+css 文章标签： html

于 2022-05-25 18:27:46 首次发布

本文链接：https://blog.csdn.net/xj470574/article/details/124971311

版权

HTML+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML标签

格式

<!doctype>
<html lang="en">
      <head>
            <title>网页的标题</title>
            <meta charset="UTF-8">         
      </head>
           <body>
               <h1>识之律者女士<font color="red">万岁</font></h1>
               <h2>符华</h2>
               <p>剑气连绵无穷尽</p>
               <p>从来英雄不容情</p>
               <p>枪槊既见瑕玷处</p>
               <p>入世出世皆随心</p>
           </body>
</html>

< html >    < /html >根标签标记
<html></html>的子标签标记<head> </head>、<body> </body>
<head></head>的子标签标记<title>

< !-- -- >HTML的注释

<!--
HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的 
开发中一定要养成良好的写注释的习惯，注释要求简单明了
注释还可以将一些不希望显示的内容隐藏
注释不能嵌套
-->

网页的基本结构

< !doctype html > HTML5的文档声明

< !doctype html >或< !doctype >
- 写在第一行（最开头）
- < !doctype html >后仍需要< html >

布局标签

header标签

< header > 头部内容们< /header >
表示网页的头部

main标签

< main >网页主体部分< /main >
表示网页的主题部分
一个页面中只有一个main

footer 标签

< footer >网页底部内容< /footer >
表示网页的底部

nav 标签

< nav >导航选项< /nav >
表示网页中的导航

aside 标签

< aside >和主体相关的其他内容< /aside >
和主体相关的其他内容
侧边栏

article 标签

< article > 独立的文章< /article >
表示一个独立的文章

section 标签

< section >内容< /section >
表示一个独立的区块，上边的标签都不能表示时使用section

div 标签

< div > 内容< /div >
没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 标签

< span >< /span >
行内元素，没有任何的语义，一般用于在网页中选中文字

< html >

＜html＞所有内容＜/html＞
- 一个网页中有且只有一个根标签
- 所有网页内容都需要写在根标签中
- 在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了除head和body以外的子元素

< head >

＜head＞内容＜/head>
< head >是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页

< meta >

< meta >标签用来设置网页的一些元数据，元数据不是给用户看

charset 指定网页的字符集

< meta charset="utf-8" >

name 指定数据的名称

content 指定数据的内容

< meta name="keywords" content="网站的关键字们，用逗号隔开" >
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
< meta name="description" content="指定网站的描述内容">
- description 用于指定网站的描述

http-equiv 重定向

< meta http-equiv="refresh"content="时间;url=跳转地址"> 将页面重定向到另一个网站
< meta http-equiv="refresh"content="3;url=https://www.mozilla.erg"> 将页面重定向到另一个网站

＜title＞

＜title＞网页的标题＜/title＞
- < title >为< html >的后代
- < title >为＜head＞的子标签
- title中的内容会显示在浏览器的标题栏
- 搜索引擎会主要根据title中的内容来判断网页的主要内容
- title标签的内容会作为搜索结果的超链接上的文字显示

< body >

＜body＞内容＜/body＞
- 网页中的主体
body是html的子元素，表示网页的主体，网页中所有的可见内容都应

< h 1->6>标题标签标记

＜标签名等级＞标题名＜/标签名等级＞
- 标签名 h1、h2、h3、h4、h5、h6（h1~h6）
- 从h1~h6重要性递减，h1最重要，h6最不重要
- h1在网页的重要性仅次于title标签
- 一般情况下一个页面只会有一个h1
- 一般情况下标题标签只会使用h1~h3,h4~h6很少用
- 标题标签都是块元素
hgroup 标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

< p >段落标签标记

＜p＞段落内容＜/p＞
p标签表示页面中的一个段落
p也是一个块元素

< font >字体

<标签> 内容<font+空格+属性1="要改成的属性" +空格+属性2='要改成的属性'>字体修改的内容</font>内容</标签>

< font color="颜色" >修改字体颜色

<h1> 识之律者女士<font color="red">万岁</font></h1>

< em >标签（斜体）

内容< em > 语音音调加重内容< /em >内容
em 标签用于表示语音音调的一个加重
em 标签是行内元素

< strong >标签（加粗）

内容< strong >强调内容< /strong >内容
strong表示强调，重要内容！
strong是行内元素

< blockquote>标签

< blockquote >长引用内容< /blockquote >
< blockquote > 表示一个长引用（谁说：长引用内容）
< blockquote > 是块元素

< q > 标签

< q >短引用< /q >
< q >表示一个短引用
< q >是行内元素

< br >标签

< br >标签表示页面中的换行

HTML相关概念

属性

定义

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，一个根据文档中的规定来填写

进制

十进制（日常使用）

特点

满10进1

计数

0、2、3、4、5、6、7、8、9、10、11、12......19、20、21......

单位数字

0、2、3、4、5、6、7、8、9（0-9）

二进制（计算机底层进制）

特点

满2进1

计数

0、1、10、11、100、101、110、111、1000、

单位数字

0、1（0-1）

扩展

所有数据在计算机底层都会以二进制的形式保存
可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0，这个小格子在内存中被称为1位（bit）
- 8bit=1byte（字节）
- 1024byte=1kb（千字节）
- 1024k=1mb(兆字节)
- 1024mb=1gb(吉字节)
- 1024gb=1tb(特字节)
- 1024tb=1pb

十六进制

特点

满16进1

计数

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f、10、11、12、13、14、15、16、17、18、19、1a、1b、1c、1d、1e、1f、20、21、22

单位数字

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f（16个）

字符编码

概念

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外，所以一段文字在存储到内存中时，都需要转换为二进制编码，当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
编码
- 将字符转换为二进制码的过程称为编码
解码
- 将二进制码转换为字符的过程称为解码
字符集（charset）
- 编码和解码所采用的规则称为字符集
乱码问题
- 如果编码和解码所采用的字符集不同就会出现乱码问题
常见的字符集
- ASCII
- ISO88591
- GB2312
- UTF—8

块元素和行内元素

块元素

定义

在页面中独占一行的元素称为块元素（block element）

特点

在网页中一般通过块元素来对页面进行布局

行内元素

定义

在页面中不会独占一行的元素称为行内元素（inline element）

特点

行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放快元素
块元素中基本什么都能放
p元素中不能放任何的块元素

练习

<html>
    <head>
        <meta charset="UTF-8">
        <title> 第二个网页</title>
    </head>
    <body>
        <h1>识之律者女士<font color="red">万岁</font></h1>
        <h2>符华</h2>
        <p>剑气连绵无穷尽</p>
        <p>从来英雄不容情</p>
        <p>枪槊既见瑕玷处</p>
        <p>世出世皆随心</p>
    </body>
    </html>

进制转换单纯算是强迫症虽然会但是忍不住习惯性写了