HTML——块级元素、行内元素

QYXQYX_

于 2021-08-24 20:22:03 发布

阅读量133

点赞数 2

分类专栏：知识点文章标签： html5 css html

本文链接：https://blog.csdn.net/QYXQYX_/article/details/119897786

版权

知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端三要素

1.HTML         搭建页面骨架
2.css          修饰页面
3.JavaScript   交互

HTML（超文本标记语言）

1.a.开发环境搭建
      编辑器：vscod       编写代码的地方
             sublime     体积小，运行速度快
             文本编辑器   没有代码提示以及插件
      浏览器：火狐        代码执行的地方
             谷歌
             IE
      部署环境：apache    代码部署的地方
    b.三拨人
      w3c           制定规范（标准）
                    例：<div></div> 盒子
      浏览器厂商    火狐、谷歌、微软
      程序员        使用者
2.介绍
    1）作用：搭建页面骨架
    2） HTML：是HyperText Markup Language(超文本标记语言)的简写
    3） HTML文件后缀名:.htm或者.html
3.html文档结构（注释：ctrl+/ 或 
    <!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">       
    </head>                                                                            
    <body>                                                                             
      <div>hello world!</div>
    </body>
    </html>
4.语法
    1）注释
       
       注释内容不会被浏览器解析
       作用
       1.记录你的编程思路
       2.便于后期代码维护
    2）元素
       a.双标签元素
           元素=开始标签+结束标签+内容+属性
       b.单标签元素
           只有开始标签+元素
    3）属性
       a.属性写在开始标签中
       b.属性=属性名+属性值
       c.属性名和属性值之间用=分隔，属性值使用引号（双引号、单引号）包引起来
       d.核心属性：每一个元素都可以拥有的属性
            title:提示信息
            id：元素的唯一值
            class:类名（css选择器）
            style:定义一些样式
       e.特有属性:某些元素特有的属性
            charset:字符集
            src:路径
    4）空白、实体
       a.无论有多少空格，浏览器都会按照一个空格来处理
       b.实体：&nbsp(空格)、&lt(<)
5.块级元素(搭建页面的骨架)
    1）特点：a.独占一行空间
             b.默认元素宽度为父元素的100%，高度由内容或者子元素决定
             c.块级元素可以设置宽高
        例：div:无意义的块级元素（没有任何的默认样式）
            p:段落   默认有一个margin-top margin-botoom
            h1~h6:标题    默认字体大小和字体宽度，外边距
            ul：无序列表（ol有序列表）
                子元素:li
            dl:列表
               dt 标题
               dd 列表项
6.行内元素（装饰性）
    1）特点：a.共享一行空间，如果一行无法放下，则自动换行显示
             b.默认宽高都有内容所决定
             c.默认无法设置宽高
        例：span：无意义的行内元素
            a:超链接
              超链接（绝对路径、相对路径）
                      路径
                      绝对路径
                      E:/
                      相对路径
                      ./
                      ../
              锚点
                  为目标元素定义一个id值，写上一个a标签，给a标签的href属性写上目标元素的#+id值
            strong：这是强调
            i：这是斜体
            em
    2)img    图片
             src   图片的路径
             alt   当图片加载失败的时候，替代图片的文字
             width 宽度
             heigh 高度
7.元素使用的策略
a.使用块级元素搭建页面骨架，使用行内元素装饰
b.不知道用什么块级元素的时候，就用div
c.不知道用什么行内元素的时候，就用span
href 表示跳转的目的地，取值如下
8.目标元素的ID值
1）用于锚点跳转
     href="#目标元素的ID值"
2）URL
       URL使用path来定位文件，path又分为相对路径和绝对路径
         路径
         绝对路径   E:/
         相对路径   ./ 、 ../
3）email
       <a href="mailto:liuyr@briup.com">联系我们</a>

属性学习

<!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>
    <div title="hello" id="app" class="main" style="color: blue;">hello</div>
</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>
</head>
<body>
  
    <div style="width: 100px;height: 200px;background-color: cornflowerblue;">666</div>
    <div>123</div>
   <div>234</div> 
   <p>这是一个段落
   </p>
   <h3>这是一个标题1</h3>
   <h4>这是一个标题2</h4>
   <h5>这是一个标题3</h5>
   <ul><li>html</li></ul>
   <ul><li>css</li></ul>
   <ul><li>java</li></ul>
   <ol><li>香蕉</li><li>苹果</li><li>橘子</li></ol>
   <dl>
       <dt>前端</dt>
       <dd>html</dd>
       <dd>css</dd>
       <dd>Java</dd>
   </dl>
   <span>cool</span>
   <span>cool</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>行内元素</title>
</head>
<body>
    <div>cool</div>
    <span id="top">我是一个行内元素</span>
    <span>我也是一个行内元素</span>
    <a href="https://www.baidu.com">百度一下</a>
    <a href="./快级元素.html">块级元素</a>
    <div style="height: 2000px;"></div>
    <a href="#top">回到顶部</a>
    <a href="mailto:1162530691@qq.com">发邮件给</a>
    <strong>这是强调</strong>
    <i>这是一个斜体</i>
    <img src="./1536-878.jpg" alt="图片不见了">
    <div>cool <span>cool</span></div>
</body>
</html>

QYXQYX_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML——块级元素、行内元素

前端三要素 1.HTML 搭建页面骨架 2.css 修饰页面 3.JavaScript 交互HTML（超文本标记语言） 1.a.开发环境搭建编辑器：vscod 编写代码的地方 sublime 体积小，运行速度快文本编辑器没有代码提示以及插件浏览器：火狐代码执行的地方谷歌...
复制链接

扫一扫