关于html网页制作的初步学习

Astar stars

已于 2022-07-15 14:45:19 修改

阅读量532

点赞数 4

分类专栏： html学习笔记文章标签：学习 html

于 2022-06-20 18:19:05 首次发布

本文链接：https://blog.csdn.net/astar2022/article/details/125373847

版权

html学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本篇文章，是由本人在上课时刚接触html软件一天后，对于html网页制作的初步了解，对于html网页的一些认知。

以下便是本人在一天内所初步了解的一些知识。

测试编辑器

1.前端前期三剑客

HTML 搭网页结构（主要学习一些标签）

CSS 网页装饰（）

JS 实现一些响应功能

2.软件安装步骤

(1)安装VSCode

(2)打开html文件

(3)创建一个新的网页

(4)安装插件chinese

live server

vetur

chinese lorem

网页结构

1、注释 ctrl+

<!-- 注释  ctrl+/   
   1、注释不能嵌套
   2、养成注释的习惯
   3、注释要简单明了
-->

2、html注意事项

（1）html重点关注的是语义，而不是样式

（2）html是根标签/根元素，一个页面只有一个html ，所有的内容必须写在html。

3、<head>：保存一些元信息里面内容不会在页面中展示只是辅助浏览器编译页面。

<title>：默认情况显示在浏览器的标题栏中，它最重要的作用是帮助推广部门做SEO/SEM优化。

<head>
    <!--  属性  属性值  放在标签内部 -->
    <!-- meta 自结束标签  设置一些元信息  辅助浏览器编译代码
        charset  字符集  
           utf-8  万国码
           GB2312   中国
           GBK   中国扩展版
        编码  将字符转成二进制
        解码   将二进制转成字符   
        乱码  编码和解码参考的标准不一样
    -->
    <meta charset="utf-8" />
    <title>标题</title>
  </head>

实体

1、什么是实体？

浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号用一些额外的字符来表示，这些额外的字符，就叫实体

2、实体语法

&实体的名字；

3、常用的实体

  空格

> 大于号

< 小于号

更多可见 https://www.w3school.com.cn/html/html_entities.asp

有如下代码

 写下约定的墙角&nbsp;是最美丽的记号<br>
    1&lt;5&gt;3

可得到

html规范

（1）html 不区分大小写但一般用小写

（2）注释不能嵌套

（3）浏览器的纠错一定要避免

（4）html标签规范，要么成双成对，要么自结束

（5）标签可以嵌套，但不能交叉

常用标签

1、标题标签（六个标题标签，常用h1-h3）

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

从样式上看，h1->h6,逐步变小，语义也是逐渐变小的。标题标签也是辅助推广部门做推广的；重要性仅次于title标签；h1语义最重，一个页面一般也只出现一次；标题标签是块元素，会独占一行。

2、段落标签 p 也是块元素，会独占一行

 <P>量才的承君事畴她</P>
    <p>今晚</p>

从样式上看，段落和段落之间有间距，一般用来包裹文字和图片。

3、标题分组 hgroup

<hgroup>
        <h1>登高</h1>
        <h3>杜甫</h3>
</hgroup>

4、强调标签

em strong 不会独占一行是行内元素

em 有斜体 strong 加粗

面试题：em strong都是强调标签有什么区别

em 强调的语音语调

strong 强调的是内容的重要性

em>家下</em>
    <strong>普</strong>

5、换行标签 br 自结束标签

6、分割线 hr 自结束标签

7、居中效果 center

 <hr>
    <center>
        <h1>彩虹</h1>
        <h3>timez</h3>
        离别的眼泪我还不懂<br>
        回忆淡淡的就像风<br>
        期待一道彩虹<br>
        连接我们的天空<br>
        在夕阳下最后的拥抱<br>
        记得你甜美的心跳<br>
        离别的眼泪我还不懂<br>
        写下约定的墙角&nbsp;是最美丽的记号<br>
        回忆淡淡的就像风<br>
        期待一道彩虹&nbsp;连接我们的天空<br>
    </center>
    <hr>

8、div 没有任何意义，只表示一句话。

9、span 没有任何意义只表示一个行内元素，一般来包裹文字。

10、del 删除线标签

原价: <del>9999</del>
   现价: 999

块元素和行内元素

元素分为块元素行内元素行内块元素

块元素

1.会独占一行

2.块元素的宽度默认是父元素的百分百

3.块元素的高度默认是被内容撑开

行内元素

一般用来包裹文字

1.不会独占一行

2.行内元素宽高都是被内容撑开的，不可以自定义宽度

行内块元素

兼具块元素，行内元素的特点

布局的注意点

1、块元素里面什么都能放，能放块元素。能放行内，能放行内快

2、行内元素里面不能放块元素

3、p标签是一个特殊的块标签，里面不能放块元素

结构布局标签

新标签

header 表示头部

main 表示主体

footer 表示底部

nav 表示导航

aside 一般表示和主题相关的内容

article 文字相关的内容

<header></header>
    <main></main>
         <nav> </nav>
         <aside></aside>
         <article></article>
    <footer></footer>




    <!--头部   -->
    <div></div>
    <!-- 主体 -->
    <div></div>
    <!-- 底部 -->
    <div></div>

以上的内容差不多也就是今天一天所学的知识了，在课下期间自己也是通过今天所学的知识写了一点东西。

<!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>彩虹timez歌词</title>
</head>

<body>
    <hr>
    <center>
        <h1>彩虹</h1>
        <h3>timez</h3>
        离别的眼泪我还不懂<br>
        回忆淡淡的就像风<br>
        期待一道彩虹<br>
        连接我们的天空<br>
        在夕阳下最后的拥抱<br>
        记得你甜美的心跳<br>
        离别的眼泪我还不懂<br>
        写下约定的墙角&nbsp;是最美丽的记号<br>
        回忆淡淡的就像风<br>
        期待一道彩虹&nbsp;连接我们的天空<br>
    </center>
    <hr>
    <div>
        <h1>短歌行</h1>
        <h3>曹操</h3>
        对酒当歌,人生几何!<br>
        譬如朝露,去日苦多。<br>
    </div>
    <hr>
    <div>
        <h1>狱中题壁</h1>
        <h3>谭嗣同</h3>
        望门投止思张俭,忍死须臾待杜根;<br>
        我自横刀向天笑,去留肝胆两昆仑。<br>
    </div>
    <hr>
    写下约定的墙角&nbsp;是最美丽的记号<br>
    1&lt;5&gt;3

</body>

</html>

以上便是全部，希望明天会更好。