html标签的结构和认识2022/7/11

id2359955624

已于 2023-05-31 21:21:52 修改

阅读量1.7k

点赞数 1

文章标签：大数据

于 2022-07-11 20:20:33 首次发布

本文链接：https://blog.csdn.net/id2359955624/article/details/125728391

版权

1，上午认识了html的结构和快速键位

注释内容 html

// 单行注释 js

注释内容：快捷键 Ctrl + / （可以空格注释，先择某行注释，多行注释）

注释：是代码解析文本，备注的呢容不会被执行

注释的内容的作用：

1，为了让他人或者自己阅读代码更加方便，便于更好的理解代码

2，将代码注释起来，不会执行，可方便删除，或者还原代码。

3，注释可以作为初学者的笔记使用

快捷键:

html：5 生成基本代码快

标签名+TAB/ENTER 快速生成标签

快捷键

快捷键
html：5              生成代码块
标签名+TAB/ENTER      快速生成标签
     Ctrl +S              保存
     Ctrl +A              全选
     Ctrl +C              复制
     Ctrl +V              粘贴
     Ctrl +X              裁剪
     Ctrl +Z              撤回
     Ctrl +Y              反撤回
     Ctrl +B              打开
     Ctrl +F              查找
     Ctrl +H             替换 
     Ctrl ++             增大字体
     Ctrl +-             减小字体
     Alt+z               自动换行
     Alt+鼠标左键         多行输入
     Alt+ b              快捷打开浏览器
-->
<!-- DOCTYPE：版本标记，在HTML文件中第一行就是DOCTYPE
DOCTYPE：告诉文件类型，告诉浏览器以标准模式解析文件
html：html就是告诉浏览器是html5的文件 -->

2，下午学习

title是标题的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好酷网页</title>

<title>（里面可以更改喜欢的网页名字）</title>

head：头标签设置网页头部信息。在标签内容添加说明标签，不会显示在网页中 -->

1，1，html1

通过<h1>-到<h6>标签定义出你想要的字体大小

hr 表示水平分割线，用于分割内容

默认格式: 1px的边框线，8px的上下外间距。

2，<span>标签是超文本标记语言，里面可以编写你所需要的内容

p 段落标签，快元素。写出主要的内容

3， <img src="./（添加所需要的图片）" alt="">有多种添加方式

4， <a href="添加你说添加的网站" target="_blank" title="添加的文字">添加的文字</a>

5，<abody>

 <!-- 
        b:加粗文本,没有特殊意义.
        strong:加粗文本,具有很强的强调意义,用于表达文本的重要性.
        i:斜体文本,没有特殊意义.
        em:虽然是斜体文本,具有很强的强调意义,用于表达文本的重要性.
        br
        p这是sup上标/sup和sub下标/sub /p
        s删除线文本/s
        del删除文本/del
        u下划线文本/u
        ins下划线文本/ins(有很强的添加性内容)
        small小号文本/small(比其他小一号)
        big大号文本/big

b:加粗文本,没有特殊意义.

strong:加粗文本,具有很强的强调意义,用于表达文本的重要性.

R55 <body>

<!--

HTML语义化标签:

根据内容的结构(内容语言化),选择合适的标签(代码语言化)

便于开发者阅读和写出跟好的代码:

让浏览器的爬虫和机器很好的解析.

html语义化的好处

1.为了在没有css的情况下,我们的也能更好的内容结构,代码结构.

2.代码结构清晰,方便阅读

3.方便搜索引擎识别界面,有利于搜索引擎优化

4方便其他页面的解析(比如屏幕浏览器,盲人阅读器,移动设备等),以及语文化的方式渲染页面

-->

<div>标记导航</div>

<header>页眉,通过包括页面的logo,主导航,全站链接以及搜索框</header>

<main>页面的主要内容,一个界面只能使用一次;如果是一个web应用,则包括其主要功能;</main>

<footer>页脚,当父元素为body时候整个页面的叶脚,</footer>

<aside>定义所有内容之外的部分,如侧边栏,广告;</aside>

</body>

学习body内容

<body>
    <!-- 
        在html中,如果需要显示<或>转义字符时,不能直接使用,否则会被误认为是一个标签
        ,需要使用转义字符进行转义
     -->
    <!-- <p>在html中,使用<hr>表示水平分割线.</p> -->
    <!-- 
        &lt;  表示<
        &gt;  表示>
     -->
    <p>在html中,使用&lt;hr&gt;表示水平分割线.</p>
    <p>在html中,使用&amp;表示和.</p>
    <p>在html中使用&emsp;表示中文空格.</p>
    <p>在html中使用&nbsp;表示英文空格</p>
    <p>在html中使用&copy;表示版权.</p>
    <p>在html中使用&reg;表示人民币.</p>
    <p>在html中使用&deg;表示度.</p>

html：跟标签，是整个页面的第一个标签，文档的所有内容都是这个标签。

标签的函套：形成父子关系，外层为父元素，内层为子元素。

标签的属性：在开始标签内添加，一般可以属性=“属性值” 的形式存在。属性都是给标签添加一些说明的。

lang：language，语言，说明文档的语言类型-->