HTML5介绍

kyrie28
201 阅读5分钟

image.png

image.png

image.png

固定模板

  <!-- 声明文档告诉浏览器当前文档是以html5为标准的文档（网页） -->
         
 <!DOCTYPE html>
 <!-- 网页文档由标签组成的 大部分成对出现的叫做双标签
    也有小部分单个出现的是单标签
 -->
<!-- 开始标签有斜杠的是结束标签
双标签
单标签
html是根标签内部用来放网页的内容
-->
   <!-- lang="en"当前网页使用的是英语
zh-cn：代表的是中文
<head>是头部标签用来存放网页的头部和属性
    meta是一个辅助标签：用来设置网页的基础信息
    charset="UTF-8"：设置网页编码，防止网页乱码
-->

     <html lang="en">

 <head>
<meta charset="UTF-8">
<!-- 解决ie低版本的兼容性问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 适配手机端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页的标题 -->
<title>固定模板</title>
<!-- 注释标签ctrl+/   保存ctrl+s
养成写注释的习惯，标签嵌套要有缩进。缩进使用tab键就行
  <body>：写网页的主题部分  
总结：
1.注释标签ctrl+/   保存ctrl+s
2. 养成写注释的习惯，标签嵌套要有缩进。缩进使用tab键就行
3.网页文档由标签组成的 大部分成对出现的叫做双标签
也有小部分单个出现的是单标签
4.网页编码（utf-8）设置网页编码，防止网页乱码
 -->
  </head>

<body>

  </body>

  </html>

  • 声明文档，告诉浏览器当前文档是以html5为标准的文档（网页）

  • 网页是由标签组成的，大部分标签是成对出现的， 叫做双标签（开始标签，结束标签，结束标签多了一个/），也有小部分是单个出现的，是单标签

  • html 是网页的根标签，内部用来放网页的内容

  • lang="en"：表示当前网页使用的是英语，zh-cn：中文，可加可不加，但是建议加上

  • head：头部标签，用来存放网页的一些头部信息和属性

  • meta：是一个辅助标签，用来设置网页的一些基础信息

  • charset="UTF-8"：设置网页编码，防止网页乱码，UTF-8：是世界通用的编码，必须要加上

  • 淘宝检查发现 lang="en"当前网页使用的是英语 zh-cn：代表的是中文

image.png

常用标签

      <!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>
<!-- h1-h6:加粗加大的效果1-6依次变小 -->
```<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<hr>
<!--   <hr>分隔线-->
<!-- 段落用p标签
<strong> 表示强调并由加粗效果
 <b> ：只有加粗效果
 <i>：斜体
 <em>：斜体 表示强调
-->
<p><strong>我是大帅哥</strong>
    <b>欧文欧文</b>
    <i>帅哥</i>
    <em>帅哥</em>
</p>
<!-- 网页跳转，浏览器有给其默认样式 
href：是a标签的属性用来放网页路径
a标签行内元素
img：图片标签
src：放置图片路径
title：鼠标悬浮时的文字说明
alt：图片错误时得替换内容（做好加上）

绝对路径：以http开头
相对路径：以./或../开头的路径
<br>:换行标签
img行内块元素
a标签不能设置宽高
块元素自己独占一行可以设置宽高
行内元素可以不可以设置宽高不独占一行
-->
<img src="" alt="替换文字" title="图片说明">
<a href="https://twitter.com/?lang=zh">点这里有惊喜</a>

  </body>

  </html>
  • h1~h6：标题标签，有加粗和加大的效果，从h1到h6依次变小
  • hr：分割线
  • p：段落标签
  • strong：表示强调（向浏览器强调），并且有加粗效果
  • b：只有加粗效果
  • em：表示强调（向浏览器解释），并且有倾斜效果
  • i：只有倾斜效果
  • a：超链接，可以用来做网页跳转，浏览器有给其默认的样式
  • href：是a标签的属性，可以用来放网页路径
  • img：图片标签，src：放置图片路径
  • 相对路径：以./或者../开头的路径，绝对路径：以http或者是https开头的路径
  • width：设置图片宽度，height：设置图片高度
  • alt：图片错误时的替换内容（最好加上），title：鼠标悬浮时的文字说明
  • br：换行标签
  • 块元素：独占一行，可设置宽高，有换行效果（h1~h6、p、hr、br）
  • 行内元素：不独占一行，一个紧跟在一个后面，不可以设置宽高(strong、b、em、i、a)
  • 行内块元素：不独占一行，一个紧跟在一个后面，可以设置宽高（img）

常用样式-css层叠样式表

    <!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>
    /* 内部样式 
    元素选择器 */
    
    h1 {
        text-align: center;
        /* 
        设置文本的对齐方式

        可选：
        默认左对齐
        left
        right
        center

        */
    }
    /* 类选择器 */
    
    .all {
        font-size: large;
    }
    /* 后代选择器（空格） */
    /* id选择器 #  唯一 优先级高于类选择器
    */
    
    p {
        /* 设置文本下划线 */
        text-decoration: underline;
        font-style: italic;
        width: 100px;
        /* 首行缩进2个字符 1em等于一个字的宽度*/
        text-indent: 2em;
        /* 文字倾斜 */
        /* 行高，浏览器默认行高1.5（1.5为分界）常用小数也可以35px */
        line-height: 1.5;
    }
    
    .old {
        color: aliceblue;
        /* 文本的横穿线条 */
        text-decoration: line-through;
    }
</style>
  </head>

  <body>
<h1 class="a11">大帅哥</h1>
<p>我是大帅哥</p>

<div>￥99<span class="old">￥199</span></div>
   </body>

 </html>
  • 层叠：一个元素（标签）可以有多个样式
  • style：内部样式
  • text-align：设置文本的对齐方式，默认对齐方式是左对齐
  • 后面的样式会覆盖前面的样式
  • id选择器，优先级高于类选择器，具有唯一性，一般不用来设置样式
  • 类选择器，以.开头
  • color：设置字体颜色，颜色有继承效果，子级会继承父级的颜色
  • 后代选择器 空格
  • 元素选择器直接写标签元素
  • font-size：设置字体大小
  • border：边框，solid：实线，1px：线条的粗细，green：线条颜色

参数一：线条类型，参数二：线条的粗细，参数三：线条颜色

线条类型

        border-style: solid;

线条的粗细

        border-width: 10px;

线条颜色

        border-color: bisque;

  • font-weight：文本加粗，以500为分界，大于500加粗，小于500变细 bold：加粗

  • 设置文本下划线 

     text-decoration: underline;

  • 设置文本倾斜效果

        font-style: oblique;

  • 设置文本的横穿线条

      text-decoration: line-through;

  • 设置文本缩进 1em = 1个字的宽度

       text-indent：1em

  • line-height：设置行高，浏览器默认行高为1.5（以1.5为分界）

  • 盒子高度和行高等值时可设置里面的文本垂直居中

  • 盒子水平居中

     margin: 0 auto;

  • margin：外间距，是在border的外面

    只有一个参数：设置四个方向的外间距

两个参数：第一个参数：上下，第二个参数：左右

margin特有：固定盒子宽度，用margin: 0 auto;能让盒子水平居中

三个参数：第一个参数：上，第二个参数：左右，第三个参数：下

四个参数：上 右 下 左

  • padding：内间距，是在border的里面，参数同margin
  • 内联样式，内联样式的优先级是高于内部样式，不推荐使用
avatar
文章
阅读
粉丝