html入门（学习第一天）

最新推荐文章于 2024-07-24 20:11:59 发布

〆启

最新推荐文章于 2024-07-24 20:11:59 发布

阅读量110

点赞数 3

分类专栏： css HTML

本文链接：https://blog.csdn.net/m0_70516782/article/details/125376621

版权

html 学习 servlet

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

编辑器

 前端前期三剑客
     HTML  搭网页结构（主要学习一些标签）
     CSS   网页装饰（）
     JS    实现一些响应功能
   -->
<!-- https://www.dcloud.io/hbuilderx.html 
         https://code.visualstudio.com/Download
     -->
<!-- 
        1:安装VSCode  
        2:打开html文件
        3:创建一个新的网页
        4:安装插件chinese
                 live  server 
                 vetur
                 chinese lorem
        1:改字体大小
        2: 保存和自动更新，随时改，随时更新
          Files: Auto Save  
          Files: Auto Save Delay
     -->

网页结构

<!-- 注释 Ctrl+/

1、注释不能嵌套

2、养成注释的习惯

3、注释要简单明了-->


<html>

    <!-- head 保存一些元信息  里面内容不显示 只是辅助浏览器编译页面-->

    <head>

        <!-- title 默认情况显示在浏览器的标题栏中它最重要的作用帮助推广部门

        做SEO/SEM优化 -->

        <title>标题名</title>

    </head>

    <!-- body 书写网页的主题内容 -->

    <body>

        合肥市

    </body>

常用代码格式

<!-- meta 自结束标签设置一些元信息辅助浏览器编译代码

charset 字符集

utf-8 万国码

GB2312 中国

GBK 中国扩展版

一般情况下多使用 utf-8

编码将字符转成二进制

解码将二进制转成字符

乱码编码和解码参考的标准不一样

-->

实体

浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号

用一些额外的字符来表示，这些额外的字符，就叫实体

实体语法

&实体的名字;

常用的实体

  空格

> 大于号

< 小于号


<html>
<head>
   
    <title>标题名</title>
</head>
<body>
       安徽&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合肥市

        3&lt;4&gt;5
</body>
</html>

规范

<!--

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

2、注释不能嵌套

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

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

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

-->

常用标签

一、标题标签六个标题标签常用h1-h3

从样式看，h1->h6，逐步变小，语义也是逐渐变小,标题标签也是辅助推广部门做

推广的，重要性仅次于title标签

h1语义最重，一个页面一般只出现一次

标题标签是块标签，会独占一行

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

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

三、hgroup 标题分组

</hgroup>

四、em，strong都是强调标签

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

em 有斜体 strong 加粗

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

em 强调的语音语调

strong 强调的是内容

<em>复制该信息</em>

<strong>迷宫十三分</strong>

<p>同学们长得 <strong>真好看</strong></p>

<hr />

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

安徽合肥<br />

六、分割线 hr 自结束标签

<hr />

七、center标签居中效果

</center>

八、 div 没有任何语义只表示一个快元素

<div>长关上念春无知天世。</div>

九、 span 没有任何语义只表示一个行内元素，一般用来包裹文字

<span>原留地并商韩对，由。</span>

十、 del 删除线标签

原价: <del>999</del>

现价: 99

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

块元素

一般用来布局

1、会独占一行

2、块元素的宽度默认是父元素的100%

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

行内元素

一般用来包裹文字

1.不独占一行

2.不可以自定义高度，被内容撑开

行内块元素

兼具以上特点

布局注意点

1.块元素什么都能放

2.行内元素不能放块元素

3.p 标签是特殊的块元素，里面不放块元素

结构布局标签

<!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>
      <!-- 
        header  表示头部
        main    表示主体
        footer  表示底部
        nav  表示导航
        aside  一般表示跟主体相关的内容
        article  文章相关的内容
       -->
    <header></header>
    <main>
        <nav></nav>
        <aside></aside>
        <article></article>
    </main>
    <footer></footer>

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