HTML入门笔记1

用户4265708537203
170 阅读3分钟

HTML概述

  • 全称为HyperText Markup Language，即超文本标记语言
  • 是由Tim Berners-Lee发明的
  • 由w3c制定标准

HTML起手式

<!DOCTYPE html>        //文档类型
<html lang="en">       //en表示英语，中文为zh-CN
<head>
    <meta charset="UTF-8">    //文件的字符编码，UTF-8为通用
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" >   //表示使用ie最新内核
    <title>Document</title>   //标题
</head>
<body>
</body>
</html>

章节标签

  • 标题h1~h6

    表示网页上的标题，除字体加粗外，字体由h1~h6逐渐变小

  • 章节标题 section

    表示新的内容，可以内嵌其他标签

  • 段落标签p

    p标签可以换行，但是表示的是段落，所以间隔相对br大

  • 文章 article

    可以用来表示一篇文章，内含section

  • 头部header

    放在网页头部，用于显示广告或导航栏灯

  • 脚部footer

    放在网页尾部，用于显示版权、作者、网站等信息

    表示版权的转移符号为&copy;

  • 主要内容main

  • 旁支内容aside

  • 划分div

全局属性

所有标签都有的属性称为全局属性

  • class

    给标签分类，一个标签可以添加多个类

    //在body中先有类名
<body>
    <h1 class="a b">标题1</h1>
    <p class="c">内容</p>
</body>
//在`head`里添加
   <style>
      .a,
      .c {
           background-color: black;
       }
       .b {
           font-size:500;
       }
    </style>
    ```

  • contenteditable

    表示一个元素为可编辑内容，将它放在style中可以使用户自己改样式

     <h1 class="a" contenteditable>这是在网页上可编辑的内容</h1>

  • hidden

    隐藏元素内容

    <h1 class="a" hidden>此内容在网页上看不见</h1>

  • id

    用来表示全局唯一的标签，但是没有保障，就算有两个重复的id，HTML也不会提示错误，所以尽量不要使用id属性

    //在body中先有id名
<body>
   <h1 id="a">标题1</h1>
   <p id="c">内容</p>
</body>

//在`head`里添加
<style> 
    #a{
      background-color: black;
    }
 </style>

  • style

    用来写属性样式，优先级大于CSS的外联样式

    <body>
  <h1 style="background-color: black;">标题1</h1>
</body>

  • tabindex

    可以控制tab的移动顺序

    <body>
  <h1 tabindex="1">第一个顺序</h1>
  <p tabindex="3">第二个顺序</p>
  <div tabindex="0">0表示最后一个</div>
  <div tabindex="-1">-1表示不要访问</div>
</body>

  • title

    鼠标悬停时显示信息

    <body>
  <h1 title="提示信息内容">鼠标停在该标签时显示信息</h1>
</body>

单行文字溢出时怎么解决
white-space= nowrap; //不要换行
text-overflow=ellipsis; //溢出用省略号显示
overflow:hidden; //溢出部分隐藏

默认样式

HTML标签本身就带有的样式，在Chrome开发者工具中可以显示默认样式

  • CSS RESET

   //reset.css
   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    *::after,
    *::before {
        box-sizing: border-box;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 400;
    }
    a {
        color: inherit;      //继承
        text-decoration: none;
    }
    ul,
    ol {
       list-style: none;
     }

内容标签

  • ol + li

    ol表示有序列表，与li搭配使用，可以内含多个li

    <ol>
  <li>页面会显示   "1.×××"<li>
  <li>页面会显示   "2.×××"<li>
  <li>页面会显示   "3.×××"<li>
<ol>
  • ul + li

    ul表示无序列表，用法与ol相同，与li搭配使用

    <ul>
   <li>页面会显示   "· ×××"<li>
   <li>页面会显示   "· ×××"<li>
   <li>页面会显示   "· ×××"<li>
<ul>
  • dl + dt +dd

    描述列表，dt是被描述对象，dd是描述内容

    <dl>
  <dt>广东省<dt>
  <dd>广州市<dd>
  <dd>深圳市<dd>
  <dd>东莞市<dd>
<dl>
  • pre

    预定义格式文本。在HTML中输入多个空格（或换行）会被理解为只输入一个，解决这个问题可以使用pre标签

  • code

    显示计算机代码

  • hr

    表示水平线，是单标签，只需要写<hr>，后面不用添加</hr>

  • br

    回车，与hr一样是单标签

  • a

    链接标签。内含属性href，用来添加链接跳转目标；属性target用来选择跳转方式

    <a href="http://baidu.com" target="_blank" title="该链接跳转方式为在新窗口打开">点击这里可跳转</a>

  • em

    表示强调，有语气，本身属性带有斜体

  • strong

    内容本身很重要

  • quote

    引用内容，行内引用

  • blockquote

    换行引用，块级引用

avatar
文章
阅读
粉丝