自学从零开始的HTML基础课程（day1）

黄豆粉面包

已于 2022-12-03 09:16:59 修改

阅读量622

点赞数 2

文章标签： html javascript 前端

于 2022-11-16 20:02:59 首次发布

本文链接：https://blog.csdn.net/qq_59779414/article/details/127891316

版权

注：本文所用编译软件为VSCode

一、认识简单的网页结构

<html>
    <!-- head标签 保存一些元信息 里面的内容用户看不到
    主要帮助浏览器编译代码 -->
    <head></head>
    <!-- body标签 网页主体内容 所有给用户看的都写在body里 -->
    <body>
        我的第一个页面
    </body>
</html>

html标签，根标签/根元素，所有的网页内容都要写在html里面，开始标签和结束标签中间，一个页面只能有一个html标签

<!DOCTYPE html>

文档声明，写在html最上面，告诉浏览器我按照html规范编写代码，浏览器也要按照规范编译，以免代码编译陷入怪异模式

二、了解title标签和meta标签

2.1、title标签

<!DOCTYPE html>
<html>
    <head>
        <title>你看我在哪里？？？</title>
    </head>
    <body>
        选胜倒国的丹却，木。
    </body>
</html>

title标签是网页的标题，显示在标题栏中，不关注它显示在哪里，关注的是它的语义，最重要的意义是可帮助推广部门做推广，给浏览器搜到

2.2、meta标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="原神">
        <meta name="description" content="阴阳师">
        <title>网页的标题</title>
    </head>
    <body>
        欲位者的劫的么，亲出妙，人吞。
    </body>
</html>

meta标签，是一个自结束标签也可以存一些元信息，帮助浏览器编译代码，自结束标签有两种写法： <mtea> 或 <meta />
注：在开始标签里，我们可以加属性和属性值
charset 字符集属性设置密码本
utf-8 万国码属性值某一个密码本
GB 中国的
GBK 中国扩展版
charset的设置是防止出现乱码
乱码：编码和解码用的不是一个密码本

三、完整的网页结构

<!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>Document</title>
</head>

<body>

</body>

</html>

shift+！网页结构快捷键格式化代码 shift+alt+f

四、HTML的规范总结

1、html标签有成双成对的，也有自结束标签

2、html中不区分大小写，但一般小写

3、标签可以嵌套，但不可以交叉嵌套

4、养成良好的注释习惯，简洁明了

5、html css js 都是一种宽泛的语言容错率较高，会自动纠错

6、尽量避免错误，防止影响网站性能

五、认识实体

<!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>Document</title>
</head>
<body>
    &nbsp;
    2&lt;5&gt;4
    &copy;
</body>    
</html>

5.1、什么是实体

在编写网页时有一些字符无法打出，例如空格，大于号小于号等，这些字符已经提前被编译器或浏览器征用，我们不能正常使用，我们要用额外的字符来代替，这些额外的字符就叫实体。

5.2、实体的语法

&实体的名字;

5.3、常用的实体

空格：  

大于号： >

小于号： <

版权符号： ©

六、常用的标签

6.1、标题标签

h1,h2,h3,h4,h5,h6

h1 一级标题

h1-h6，字体的大小逐渐减小，从语义上看，h1-h6语义逐步降低，帮助浏览器检索内容，提高网络排名

常用的标题标签：h1-h3

h1的语义最重，一个页面一般只有一个，标题标签会独占一行，是块元素

    <h1>感觉快下雨了</h1>
    <h2>感觉快下雨了</h2>
    <h3>感觉快下雨了</h3>

6.2、段落标签

默认样式：段落与段落之间有较大空隙，段落标签也会独占一行，是块元素

    <p>
        第为法亓订，太才又。
    </p>
    <p>
        惜韩承才有呼于为也知惊变子色。     
    </p>

6.3、标题分组

hgroup 让标题之间有关系，没有默认样式

    <hgroup>
        <h1>望庐山瀑布</h1>
        <h3>李白</h3>
        <h2>日照香炉生紫烟，</h2>
        <h2>遥看瀑布挂前川。</h2>
        <h2>飞流直下三千尺，</h2>
        <h2>疑是银河落九天。</h2>
    </hgroup>

6.4强调标签

strong 强调标签默认样式：字体加粗加黑

    <p>
        我看着<strong>真帅</strong>
    </p>

em 强调标签，默认样式：字体斜体

    <p>
        我是<em>真帅</em>
    </p>

注：

面试题：在html中有两个强调标签，有什么区别？

1.默认形式有区别

2.语义也有区别：strong强调的是内容，em强调的是语音语调，在实际使用中不做区别

6.5、强制换行

br 强制换行自结束标签

    却的登是他教，承梵。<br>
    商忧鲜意。<br>

6.6、分割线

hr 分割线自结束标签

<hr>

6.7、删除线

del 删除线

    原价：<del>999999元</del> <br>
    现价：9.9元

6.8、居中

center 居中

    <center>
        <h1>向要轻原在不土找馆。</h1>
    </center>

6.9、div

div 是一个没有任何语义的标签是块元素

    <div>
        德认此否宋土娇君当。
    </div>

6.10、span

span 无语义标签，一般用来包裹文字

6.11、引用标签q

q 引用标签默认标签，加双引号

子曰：<q>学而时习之</q>

6.12、img标签

开始标签里可以加多个属性，用空格隔开即可

img标签引入外部的图片，自结束标签，4个属性

src 引入图片的路径暂时将html文件和图片放在同一文件夹下

alt 是对图片的描述，正常情况下alt内容不显示，图片路径有问题时图片引入不成功会显示，可帮助浏览器检索图片，养成写alt的习惯

width 设置图片宽度

height 设置图片高度

一般情况下不会同时设置width和height，只要单独设置一个，另一个会自适应

<!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>Document</title>
</head>

<body>
<img src="./" alt="" height="200px">
</body>

</html>