重新认识web前端-html的基本知识

最新推荐文章于 2024-09-10 14:15:01 发布

oldfour_0830_9674

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量108

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_41163341/article/details/108046710

版权

html的认识

html的介绍
基本语法
常用元素
基础特性
语义化

html的介绍

<!DOCTYPE html>
<!-- document type 文档声明 类型html  
      不是一个标签
      作用：告诉浏览器以什么样的标准解析文档
              简化文档声明——HTML5文档，标准标模式解析
-->
<html lang="en"> <!-- 定义整个文档 -->       
    <head>
            <!-- 整个文档头部  文档相关信息 通常不会在预览结果显示-->
        <meta charset="UTF-8">
            <!-- 字符集
                    GB2312 国家标准  简体中文   GBK (简、繁)
                    UTF-8  国际标准（万国码）            
            -->
        <title>京东商城</title>
                <!-- 网页标题 标题栏，收藏夹-->
    </head>
    <body>
             <!--  文档主体 -->


        <!-- 
            HTML文档
                    .html
                            .exe .docx .jpg  .gif(操作系统标识文件类型)

            HTML超文本标记语言
                    标记 组成

                    常用标记
                    作用
                    相关属性


            基本结构：
                    html:5
                    !

                
                    HTML注释
                        ctrl+ /

                        1.添加注解
                        2.阻止解析，执行

 -->

        
    </body>
</html>

基本语法

  <!-- 基本语法：
  
       HTML元素是由尖括号包围
       通常是成对出现
          开始-开始标签
          结束-闭合标签
          开始和结束之间的内容是标签内容
       不成对出现标签——空标记 空元素 自闭合标签
              <meta>
       HTML允许定义属性（给元素添加附属信息）
                通常在开始标签内部
                以属性名称=“属性值”形式存在
                <meta charset="UTF-8">        
  -->

常用元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        div
            块 容器
                没有语义

            作用：
                划块（分区）
                组合其他HTML元素

     -->

    <div>内容</div>

    <!-- 
        标题 
             h$*6
         
             默认 加粗，字号
             h1最大标题
             h2二级标题
             ...

             h1不要滥用
                 logo
                 文章页标题

            注：包含文字，图片，内联标签

     -->
    <h1>标题一</h1>
    <h2>标题一</h2>
    <h3>标题一</h3>
    <h4>标题一</h4>
    <h5>标题一</h5>
    <h6>标题一</h6>
    <!-- 
          段落           
          通常用来包含文本，图片，内联标签
     -->

    <p>段落</p>

    <!-- 无序列表 
            固定嵌套  ul>li

            结构简单，重复，并列关系的

            例：导航 菜单 分页 新闻列表（结构简单，重复的内容）
    
        了解：
            列表样式
                    circle（空心圆）  disc(实心圆)  square(方形)
    -->
    <!-- ul>li*3 -->
    <ul>
        <li>列表项
            <!-- <p></p>
            <ul>
                <li></li>
            </ul> -->
        </li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

    <!-- 

        ol  【有序】列表
            固定嵌套
             列表 —— 结构简单，重复，并列关系的

             例：排行榜 面包屑导航

             type="i"   
                    i小写罗马字符
                    I大写罗马字符
                    A,a 字母
                    1 数字
     -->

    <ol type="i">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

    <!-- 
        定义列表
            dl>dt dd 固定嵌套

            注：dt通常包含文字，图片，内联标签
     -->
 
    <dl>
        <dt>【定义 标题】 HTML</dt>
        <dd>【解释说明】 超文本标记语言</dd>
    </dl>
    <!-- 
    img 图片
        空元素
        
        src="" 资源地址
        alt="" 替换文本
                在图片资源不能正常加载时显示
                有利于用户体验


        width="" 宽度
        height="" 高度
            只定一个，另一个按比例等比缩放


        路径：
             相对路径
                 同级目录：
                        文件名.扩展名
                        pic.jpg
                        ./pic.jpg

                 下一级目录:  
                        文件夹/文件名.扩展名
                        pic/2.jpg
                        pic/a/1.jpg
                 上一级目录：
                        ../  上一级目录          
                        ../../ 上上级目录

             绝对路径
                   域名/文件目录/文件名.扩展名

       
 -->
    <img src="pic.jpg" alt="哑铃" height="200" width="100">
    <img src="pic/2.jpg" alt="哑铃" height="200" width="100">
    <img src="../3.jpg" alt="哑铃" height="200" width="100">
    <img src="https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/59215/22/3658/204953/5d18377

 <!--
     内联元素： 
           可以在一行排列，不独占一行
                 span,strong,b,em,i,a, del,img
  -->
 <span>span</span>
 <span>span</span>
 <!-- 
     没有语义 没有默认样式
         作用：区分文本样式        
  -->
  <strong>strong</strong>
  <!-- 
      默认加粗
         有语义：着重强调的语义
   -->
 <b>b</b>
 <!-- 
     默认 加粗
         没有语义
  -->
 <em>em</em>
 <!-- 
     默认 倾斜        
     有语义：强调（比strong弱）
  -->
  <i>i</i>
  <!-- 
     默认 倾斜        
     没有语义
  -->
  <!-- 删除 -->
 <del> del </del>  
 <img src="pic.jpg" alt="">
 <img src="pic.jpg" alt="">
 <a href="#">超链接</a>
 <a href="#">超链接</a>    
    
</body>
</html>

基础特性

  <!-- 
      块级元素
           独占一行
           
           默认支持宽高
           默认宽度100%(相对于父元素)
           从上向下排列
           
           
           div
              h1-h6
              p
              ul ol li 
              dl dt dd
      行级元素：（内联元素，行内元素）
          
              可以在一行排列，一行装不下时，自动折行
              默认不支持宽高
              默认宽度等于内容宽
              span
                  strong em
                  b      i 
                  a                   
                  del
                    
                      img  内联块（行级块）
                            可以在一行排列，一行装不下时，自动折行
                            默认支持宽高
   -->

语义化

   <!-- 
       什么是HTML语义化？
             用合适的标签和属性组合文档结构     
                   标题 h标签
                   段落 p标签
                   给重要的图片加alt属性   
       语义化的好处？
            结构清晰，增强代码可读性，
            有利于后期维护，
            有利于团队合作
            有利于SEO(搜索引擎优化)
            有利于用户体验
    -->