html基础知识

最新推荐文章于 2024-11-14 00:00:11 发布
最新推荐文章于 2024-11-14 00:00:11 发布
阅读量86 收藏
点赞数
分类专栏： 前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35385357/article/details/127885666
版权

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>
wiseleeeeee
关注
专栏目录
html基础知识1111
03-26
html基础知识1111
HTML基础知识
xuan971130的博客
03-02 2976
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
HTML基础知识点
qq_40046544的博客
07-27 8960
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识总结
qq_40046544的博客
11-14 4336
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识点总结
weixin_64704029的博客
07-28 2236
html知识点
HTML基础知识（超详细！）
qq_60950941的博客
04-18 3406
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML基础知识点大全
m0_69674158的博客
05-04 6988
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
前端-HTML基础知识详解
qq_52262831的博客
12-23 5018
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML 基础知识
是芜湖的，更是世界的！
05-10 2239
html基础知识
Html基础知识点整理
m0_53157173的博客
06-15 1947
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
探索 HTML 和 CSS 实现的 3D 开关按钮
weixin_52814911的博客
11-11 469
这段代码是一个HTML和CSS的组合，用于创建一个3D风格的开关按钮（通常用于控制某些设置的开启或关闭）
vue计算属性 初步使用案例
weixin_46253800的博客
11-13 180
会根据我们单项筛选，进行相应的页面展示，计算属性类似于函数，也有其返回值，返回值可以是个数组。用v-model对priceFilter进行了双向数据帮当，单选每一项的时候，会改变其值。computed是计算属性，它与data同级代码块。其中 用v-for循环进行页面打印表单。totalPrice()用于计算总价格。（本章节仅仅面向初步学习，页面简陋）计算属性可以写多个 如同函数类似，这个页面，由计算属性来操控。计算属性可用于插值表达式。在我们的计算属性当中。
HTML之表单学习记录
最新发布
qq_74474809的博客
11-14 146
表单
精读HTML文件——head篇
2401_87603544的博客
11-08 925
首先，<meta>标签是卸载html文件的<head>标签下的，它的内容不会在页面上显示，不过会被浏览器的渲染器识别并执行，这段代码viewport就是一个视图接口，即网站展现在用户面前的样子,width=device-width,就是网页的宽度随着设备的宽度改变而改变，initial-scale=1,是为了优化网页的视觉效果，确保网页在加载的过程中，不会被缩放。3、<meta charset="UTF-8" />这段代码很明显，就是定义编码格式，html代码用UTF-8的形式呈现在网页上。
Java中的HTML元素设置：背景、列表与超链接
2301_77081232的博客
11-13 275
这个div使用了定义好的CSS类来设置背景颜色这是一个动态生成的超链接
Java与HTML中的标题、文本和图像
2301_77081232的博客
11-09 1033
html复制代码 <h1>这是一级标题</h1> <h2>这是二级标题</h2> 标题标签不仅用于显示不同级别的标题内容，还对搜索引擎优化（SEO）有着重要意义。搜索引擎会根据标题标签的层级结构来理解网页内容的层次关系。 在Java中生成HTML标题 在Java中，我们可以通过字符串拼接或者使用模板引擎（如Thymeleaf、Freemarker等）来生成包含标题标签的HTML内容。 以字符串拼接为例： java复制代码 public class HtmlTit
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值