html基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 在网页中的多个空格默认情况下都被浏览器解析为一个空格 
    
    <b> 加粗标签
    在html中有些情况我们不能直接书写一下特殊符号,比如多个连续的空格,比如大于小于号。
    如果我们需要在网页中书写某些特殊的符号,则需要在html中的实体

    实体的语法:
        &实体的名字


        &nbsp;    = 空格  
    
        &copy;
    
    -->
    <p>
        今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气真不错
    </p>
    <p>
        a&Lt;b&gt; c
    </p>

    <p>&copy;@wiselee</p>
</body>
</html>

整体标签的含义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!-- <mate>  元数据  -》 浏览器看的
    
    name : 指定的是数据的名名称
    content :指定数据的内容
    charaset  en zh  表示网页的语言


    <meta name="description"
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
          content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,
          囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>

    keywords / description  
    description :  网站的描述会在搜搜引擎的结果中。

    title 是在浏览器中的显示

    -->
    <meta name="keywords" content="Html,前端,css">
    <meta name="description" content="这是一个非常不错的网站">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签详解

<!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>
    <!-- 标题标签   h1-h6 六级标题 
        h1最重要   h6最不重要      h1在网页的重要性仅次于<title>标签,一般一个页面中只会有一和一级标签
            一般情况下 标签值使用h1-h3   h4-h6基本可以忽略不计 

        <语义>而不是关注他长什么样子
        标题标签也是块元素 

        在页面中独占一行的元素  称为块元素  block element 
    -->

    <h1>

            一级标题
    </h1>
    <h2>二级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <p> 我是在p标签中的显示的文字</p>
    <!-- p标签   p元素也是一个块元素-->
    <!-- hgroup  标签用来为标签分组,可以将一组有联系的标签进行分组 -->
<hgroup>
    <h1>回乡偶书</h1>
    <h2>其一</h2>
    <p>
        内容
    </p>

</hgroup>
<!-- em标签表示语音语调的一个加重 不会独占一行  这种标签称为行内元素(inline element)
em 表示语调的加强
strong 表示强调 

blockqutoe  独占一行  块元素 

-->
<p>今天天气<em>真不错!</em></p>
  <p>今天必须<strong>完成作业</strong></p>

  鲁迅说:
  <blockquote>
    这句话我是从来没有说过的
  </blockquote>

  子曰:
  <q>学而时习之,不亦乐乎</q>  
  <!-- 表示一个短引用  q是行内元素  不会独占一行 -->
</body> 
</html>

关系选择器

<!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>关系选择器</title>
    <style>
        /* 为div的子元素span设置一个字体颜色
            (为div直接包含的span设置一个字体颜色)
            子元素选择题;
                选择父元素的指定子元素
                语法:  父元素 > 子元素
         */
         /* 后代元素选择器
                选择指定元素的所有后代元素
                语法: 祖先 后代
          */
         div > span{
            color:  orange;
         }
         div span{
            color: aqua;
         }
         div > p >span{
            color: brown;
         }
         /* 兄弟元素选择器  语法:前一个 + 下一个 */
         /*  */
         p~span{
            color:red;
         }
    </style>

</head>
<body>
    <!-- 父元素:
            -直接包含子元素的
        子元素:
            -直接被父元素包含的元素是子元素
        祖先元素:
            直接或间接包含后代元素的元素叫做祖先
            一个元素的父元素也能被称为祖先元素
        后代元素:
            -直接或间接被祖先元素包含的元素叫做后代元素
        兄弟元素:
            -拥有相同祖先的元素被称为兄弟元素

         -->
    <div>我是一个div
        <p>我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
    </div>
    <span>我是div外的span</span>
    <span>我是div外的span</span>
    <span>我是div外的span</span>
    <span>我是div外的span</span>
    
    
</body>
</html>

快元素和行内元素

<!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>
    <!-- 块元素 和行内元素 
        块元素:
            在网页中一般使用块元素布局


        行内元素:
            行内元素主要用来包裹文字

        一般在会在块元素中放入行内元素
        而不会在行内元素中放块元素

        块元素中可以放行内元素也可以放块元素
        -p元素中不能放任何的块元素

        浏览器在解析网页时 ,会自动对网页中不符合规范的内容进行修正,比如:
                                标签写在了html元素之外
                                p元素中出现了块元素
                                根元素中出现了 head 和body以外的元素
    -->
   
</body>
</html>
<h1>我就要写在 html 标签的外边</h1>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 列表 :
        列表(list):
            1.铅笔
            2.尺子
            3.橡皮 

            在html中可以创建列表 一共为三种: 有序列表  无序列表  定义列表
            无序列表  ul  
                使用li表示列表项


            解析后的结果

            ol 表示有序列表
            dl 定义列表 使用dd来对内容来进行解释
                
     -->
<!-- 无序列表 -->
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>

    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>

    </ol>
    <!-- 定义列表 -->
    <dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构,结构用来规定哪里是标题,那里是段落</dd>
    </dl>
    

    <ul>
        <li>
            aaaa
            <ul> 
                <li>
                aa-1
                </li>
                <li>aa-2</li>
        </ul>
        </li>
    </ul>
</body>
</html>

内联框架

<!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>
    <!-- 内联框架  用于向当前页面中引入一个其他页面 
        使用的机会不太多 
    -->

    <iframe src="http://www.atguigu.com"   width="800" height="600" frameborder="1"></iframe>
</body>
</html>

属性选择器

<!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>
    <style>
        /* [属性名]  指定含有指定属性的元素
            [属性名= 属性值] 选择含有指定属性和属性值的元素
            [属性名^ =属性值] 选择属性值一指定值开头的元素
            [属性名$=属性值]  选择属性值以指定值结尾的元素
            [属性名*=属性值] 选择属性值中含有某值的元素的元素
         */
        P[title $=abc]{
            color:orange;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p title="abc">少小离家老大回</p>
    <p title="abcef">乡音未改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>
</html>

伪类选择器

<!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>
    <style>
        /* 将ul里的第一个li设置为红色 */

        /* 伪类:不存在的类:特殊的类
            伪类用来描述一个元素的特殊状态

            伪类一般都是:first-child  第一个子元素
                    :last-child 最后一个元素
                    :nth-child() 
                        n: 第n个范围 
                :last-of-type
         */
        ul > li:not(:nth-child(3)){
            color: green;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>haa</li>
        <li>haha</li>
        <li>ahhah</li>
        <li>haha</li>
    </ul>
</body>
</html>

音视频

<!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>
    <!-- 如果设置了autoplay  则会自动播放 -->

    <audio  controls >
        对不起,你的浏览器不支持播放音频
            <source src="./sound/黄安-新鸳鸯蝴蝶梦-(电影《路边野餐》插曲).mp3" >  
    </audio>
    <video src="https://www.bilibili.com/video/BV1JV4y137tm/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=4330d5900032f8fb56011e49b3424f01" autoplay></video>
</body>
</html>

图像

<!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>img</title>
</head>
<body>
    <img src="./imgs/1.jpg" alt="团队照片"  width="200">  
    <!-- alt : 图片的描述   
     width: 图片的宽度
     height: 图片的高度

        -宽度和高度中 如果只修改了一个,则另一个会等比例的缩放
        - 一般在pc端,一般不建议修改图片的大小

        图片的格式:  jpeg(jpg) 支持的颜色比较丰富,不支持透明效果   一般用来表示照片可以压缩
        
                     gif 颜色不丰富  支持简单透明   - 表示颜色单一的图片,动图

                     png  支持透明效果,颜色丰富,不支持动图  - 透明复杂 并且 颜色丰富   用的最多的一种格式
                     
                     
                     webp  

                     效果一样用小的,效果不一样用效果好的。
    -->

    
</html>

原文地址:http://www.cnblogs.com/wiseleer/p/16895962.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性