HTML基础知识

最新推荐文章于 2024-11-13 19:36:04 发布

suanron

最新推荐文章于 2024-11-13 19:36:04 发布

阅读量125

点赞数

文章标签： c++ 经验分享

本文链接：https://blog.csdn.net/suanron/article/details/119680408

版权

1.开发环境搭建

    编辑器：vscode            编写代码的地方
            sublime（体积小、运行速度快）
            文本编辑器（没有代码提示以及插件）

    浏览器：火狐              代码执行的地方
            谷歌

    部署环境:apache           代码部署的地方

       三拨人（万维网）
          w3c                 制定规范（标准）

          浏览器厂商           火狐、谷歌、微软

          程序员               使用者

2.介绍
作用：搭建页面骨架

HTML：超文本标记语言

HTML文件的后缀名： .htm 或者 .html

3.文档结构
     
    <!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>我的第一个HTML文档</title>
    
    </head>

    
    <body>
   hello world!
   </body>

   </html>

4.语法

1）注释
     
    注释内容不会被浏览器解析
     作用

      1.记录编程思路
      2.便于后期代码维护
      3.增加代码量

2）元素
双标签元素

元素 = 开始标签 + 内容 + 属性 + 结束标签
<p> </p>

      单标签元素

       开始标签 + 属性

3）属性

写在开始标签中

属性 = 属性名 + 属性值 <div id="main" class="top"></div>
属性名和属性值之间用等号分割，属性值用引号（双引号、单引号）包起来

核心属性：每一个元素都可以拥有的属性

        title:提示信息
        id:元素的唯一值（js）
        class:类名（css选择器）
        style:定义一些样式

      特有属性：某些元素特有的属性
         charest：字符集
         src:图片路径
         alt:替换图片文本内容
         href

4）空白，实体

      空格：无论有多少个空格，浏览器都会按一个空格处理
      实体： 空格
            <=<
            &gt；>

5.块级元素（搭建页面的骨架）

特点：
       1.独占一行空间
       2.默认宽度为父元素的100%,高度由内容或者子元素
       3.可以设置宽高

        div:无意义的块级元素（没有任何的默认样式）
        p:段落     默认有一个margin-top   margin-bottom
        h1~h6:标题默认由字体大小和宽度，外边距
        ul ：无序列表
          子元素li:
        ol:有序列表
           子元素li:
        dl:
           子元素dt
           子元素dd
        body html

6.行内元素（装饰性）

   特点：
       1.共享一行空间，如果一行放不下则换行显示
       2.默认宽高都由内容决定
       3.默认不能设置宽高

   span：无意义的行内元素

    a：超链接
       1）超链接（绝对路径、相对路径）<a href="https://www.baidu.com">百度一下！</a>
                                    <a href="./块级元素.html">块级元素</a>

       2）锚点 #目标元素ID值         <a href="#top">回到顶部</a>
          为目标元素定义一个id值，写一个a标签，给a标签的href属性写上目标元素的#id值

       3)发生邮件                    <a href="mailto:1115020563@qq.com">发邮件给guor</a>
          href: mailto:邮箱地址
              img: 图片（可以设置宽高但属于行内元素）
              src:图片的路径 =../
              alt:当图片加载失败的时候，替代图片的文字
              width   宽度
              height   高度

7.元素的使用策略

使用块级元素搭建页面的骨架，使用行内元素装饰
不知道使用什么元素的时候就用div
不知道用什么行内元素的时候用span

   路径

       绝对路径
       /

       相对路径
       ./ 当前目录
       ../ 上一级目录