HTML学习日记 day01 html基础，head标签，块标签，行标签

半座空城32

已于 2023-07-09 21:42:47 修改

阅读量63

点赞数 1

文章标签： html5 css

于 2023-07-05 20:21:03 首次发布

本文链接：https://blog.csdn.net/weixin_62235902/article/details/131563287

版权

本文介绍了HTML的基础，包括HTML5的声明、head标签的作用，如元信息设置对SEO的影响，以及基础块属性标签如div、h系列、p标签等，还提及了注释、编码格式、关键字和描述的设置，以及列表和引用标签的使用。

摘要由CSDN通过智能技术生成

01html基础

注释：便于开发人员对开发项目解释和说明性文字

html 超文本标记语言，严格意义上来说，不是一个开发语言

01html基础

注释：便于开发人员对开发项目解释和说明性文字

快捷键是ctrl+/

注释不会被应用程序解析

<!-- 注释 -->

html 超文本标记语言，严格意义上来说，不是一个开发语言

html5

html的第五个版本，添加了一些新标签和api，使用H5必须在页面的开头添加以下代码

<!DOCTYPE html>

<!DOCTYPE html>

它的含义是声明当前文档类型是 html5 标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析

html文档是由标签组成

标签分为单标签和双标签，他们的闭合方式不同，标签都需要闭合

单标签：<img />

双标签：<div> 内容 </div>

02head标签

head标签中的内容不会渲染在页面中

主要是源信息标签

<meta charset="UTF-8">

<meta charset="gb2312">

charset 属性。用来定义文本的编码格式

UTF-8：万国码，目前开发中最常用

gb2312：中文码

通常都把 charset 的值设置成 UTF-8,如果不设置charset属性，可能会导致页面乱码，解决方案是设置成utf-8即可

<meta author="科">

author属性，用来定义网站的作者，一般是公司的名字

<meta keywords="唱跳,rap,篮球" />

最常用

keywords属性用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个

精准的keywords 值，更加有利于SEO（搜索引擎优化）

<meta description="网站描述......" />

description 属性，用来简单的描述网站的内容，不要超过100个字，有利于SEO

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta的另一种写法

<title>head标签</title>

title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容

<head>
    <meta charset="UTF-8">
    <!-- 标签的属性 例如 charset -->
    <meta author="科">
    <meta keywords="唱跳,rap,篮球" />
    <meta description="网站描述......" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>head标签</title>
</head>

<body>



</body>

body 标签里面的内容，会渲染在页面的

可视区域，

03基础标签-块

标签分为行属性标签和块属性标签

块属性标签

怎么样都不会折行，都是向下排列

1.div 标签

没有任何意义的标签，通常用来进行页面布局

<div></div>
<div style="border: 1px #f00 solid;">千里冰封</div>
     <div style="border: 1px #f00 solid;">千里冰封</div>

2.h 系列标签

h1-h6 标题

在一个页面当中，h1 最多只能出现一次，h2 做多出现20次

h3-h6 次数不限

h1的用法：

1.logo处

2.资讯详情页的大标题

由于h1的权限较大只能出现在以上两个地方

<h1>万里长城永不倒</h1>
    <h2>万里长城永不倒</h2>
    <h3>万里长城永不倒</h3>
    <h4>万里长城永不倒</h4>
    <h5>万里长城永不倒</h5>
    <h6>万里长城永不倒</h6>

3.p 标签

段落标签，它里面一般包含一段文字

<p style="border: 1px #f00 solid;">也许我撞到南墙才会回头吧</p>
    <P>青春要是过去何处找少年</P>

4.分割线

单标签 <hr />

换行符 <br />文本换行

<hr />
     <p style="border: 1px #f00 solid;">
        也许我撞到南墙才会回头吧 <br/>
        也许我到了黄河才会死心吧
    </p>

5.无序列表

ul > li

可以设置他的 lisy-style-type 属性

square: 实心方块

circle: 空心圆

dotted: 实心圆

none: 取消列表样式

disc: 高版本系统下的默认样式

<ul style="list-style-type: disc;">
        <li>人之初</li>
        <li>人之初</li>
        <li>人之初</li>
        <li>人之初</li>
     </ul>

6.有序列表

ol>li

可以设置他的 lisy-style-type 属性

lower-alpha: 小写字母

upper-alpha：大写字母

lower-roman: 小写罗马文

upper-roman：大写罗马文

列表样式类型

list style type

<ol style="list-style-type: upper-alpha;">
        <li style="border: 1px #f00 solid;">
            <p>人之初</p>
            <p>人之初</p>
        </li>
        <li>人之初</li>
        <li>人之初</li>
        <li>人之初</li>
      </ol>

ol,ul,li 都是块属性标签

li 是列表项全名list

并且 ol,ul 的子元素，必须是 li标签, 其他的嵌套在li里也不能写div标签

7.定义列表

dl>dt

dl>dd

dl: 定义列表的父元素

dt: 快标签，定义列表的标题项

dd: 快标签，定义列表的列表项

<dl>
        <dt>早餐</dt>
        <dd>包子</dd>
        <dd>油条</dd>
        <dd>豆浆</dd>

        <dt>中餐</dt>
        <dd>米饭</dd>
        <dd>面条</dd>
        <dd>饺子</dd>
        <dd>螺蛳粉</dd>
        <dd>臭豆腐</dd>
    </dl>

8.address 地址标签，

一般的，它的内容是一个地址

<address>区1号</address>

9.blockquote 引用标签，

一般引用的是一段文字，他的 cite 属性表示该文字引用的文献名目

<blockquote cite="毛主席语录">要想知道梨子的味道，你必须亲自尝一尝</blockquote>

不要使用

html 官方没有的标签，虽然也会被浏览器渲染，但是不符合 w3c 规范

<h7>大神都是来自地狱的勇士</h7>
     <h7>大神都是来自地狱的勇士</h7>

<!-- 块是直接占一行，行是写了就横着排 -->
    <!-- 
        1.span 标记标签 ，没有实际意义， 通常用来渲染文字   相当于块 里面的div
     -->
    <span style="border:1px #f00 solid;">孙悟空</span>
    <span style="border:1px #f00 solid;">孙悟饭</span>
    <span style="border:1px #f00 solid;">孙悟天</span>