HTML入门笔记

最新推荐文章于 2024-07-24 16:53:23 发布

一生注定学霸命

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量159

点赞数

分类专栏： HTML与CSS基础文章标签： html

本文链接：https://blog.csdn.net/qq_40282016/article/details/112603978

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

HTML 概述

HTML是由英国计算机科学家李爵士发明（1993年）。
前端的核心：URL、HTTP、HTML
HTML初衷：让文字段落变得有序、有层次
最权威的HTML学习网站：MDN
H5 手机页面
重点记忆 div 和 span

代码错误检验：
cmd：yarn global add node-w3c-validator
在VScode中打开终端-运行
node-w3c-validator -i index.html

HTML 起手应该写什么

    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    </head>
    <body>
    ~~~~
    </body>
    </html>

DOCTYPE 文档类型
属性的值加引号的规则与命令行一致：没有特殊符号（如空格）则不需要引号
checked语法：写了就是勾上
直接闭合（自闭合）：< > 没有 /
head里面一般写的是看不见的东西
utf-8：字符编码

（body）章节标签

h1~h6 : 标题(Heading)元素呈现了六个不同的级别的标题，h1 级别最高，而 h6 级别最低。
section : section 元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说可以包含嵌套：p、h、section
header :顶部广告
footer :一般用作底部版权声明，其中版权声明标识为 ©(&+copy)
article : article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
main : 主要内容，main元素呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
aside : 旁支内容，一般可以为导航或者参考资料哦，aside 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
div :划分部分

全局属性有哪些

class ：标签分类分类标记

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .middle{
    background: black;
    color: white;
  }
    .bordered{
      border:1px solid  red;
    }
  </style><!--style中用 .middle表示只要class中含有midlle的全都作用该样式，不论完整与否，如果用 = 则需要一模一样-->
</head>
<body>
<div class="middle bordered"><!--class中可以为一个或者多个属性类型-->
  这是内容
</div>
</body>

contenteditable ：文档可编辑，用户可以直接在页面上进行元素编辑，可以做一个自己的编辑器

<div contenteditable>
文字内容
</div>

如何让style被看见（用户可以自己调试页面）：将style放到body中

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <style contenteditable>
    style{display: block; border:1px solid red;}
  .middle{
    background: black;
    color: white;
  }
    .bordered{
      border:1px solid  red;
    }
  </style><!--style中的display表示显示模式，none表示不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素-->
<div class="middle bordered" contenteditable><!-- -->
  这是内容
</div>
</body>

hidden ：隐藏元素
id ：id=““xxx” 分类标记，具有唯一性。不到万不得已不用id，全用class。
style：每一个元素都有style属性，其优先级为 js > html> scc
tabindex ：控制页面tab键的顺序,页面上可交互的地方都可以用tab键访问

<header tabindex=1><!--tab键按1下-->
<div tabindex=2><!--tab键按2下，其中数字可以不连续，0表示最后一个，-1表示不可到达。-->

title ：显示文本完整内容
文字超长单行用省略号：右键-检查-选择内容-styles

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style contenteditable tabindex=1>
  .middle{
    background: black;
    color: white;
  }
    .bordered{
      border:1px solid  red;
    }
    #xxx{
      border:10px solid yellow;
      white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    }
  </style><!--nowrap表示不换行，溢出部分隐藏，隐藏部分用省略号表示-->
  <!--#xxx缩写id属性-->
</head>
<body>
  <header id="xxx" style="border:10px solid green;" title="完整内容">
    顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告
  </header><!--title中完整内容是鼠标悬浮到省略号上显示内容-->
<div class="middle bordered" contenteditable><!-- -->
  这是内容
</div>
</body>

默认样式

HTML自带样式属性，浏览器设定的，用style可以覆盖样式。
CSS reset：默认样式一般不满足用户需求，而且特别丑，因此一般会先清除默认样式。

<style>
    *{margin: 0;padding: 0;box-sizing: borderbox;}
    *::after, *::before{box-sizing: border-box;}
    h1,h2,h3,h4,h5,h6{font-weight: normal;}
    a{color: inherit; text-decoration: none}
    table{
    border-collapse: collapse;
    border-spacing: 0;
    }
  </style>
  <!--用于清除默认样式，在添加一个style进行样式重写-->
  <!--table一定要清除默认样式，因为非常丑-->

内容标签

ol+li : 有顺序列表

      <ol>
        <li>内容1</li>
        <li>内容2</li>
      </ol>

ul+li : 无顺序列表

      <ul>
        <li>内容1</li>
        <li>内容2</li>
      </ul>

dl+dt+dd :描述列表

      <dl>
        <dt>描述对象</dt>
        <dd>描述内容</dd>
      </dl><!--dl+tab键-->

pre :保留回车、空格、tab等空白内容（HTML多个空格会缩写成一个）

<h2><pre>第一章：       标题内容</pre></h2>

code :用来包裹代码，code里面内容等宽,常与pre联合使用，保留回车

      <pre>
      <code>
        var a = 1
        console.log(a)
      </code>
      </pre>

hr :分割线，单个 <hr>
br :break换行 <br>
a :超链接

<p>
访问网站<a href="http://qq.com" target="_blank">QQ</a>
</p>
<!--target="_blank"表示在新窗口打开页面-->

em :强调，默认样式斜体
strong :重要（内容本身），加粗
quote :行内引用，默认没什么效果xxx说过<quote>引用内容</quote>
blockquote :块级引用，会换行缩进xxx说过<blockquote>引用内容</blockquote>

一生注定学霸命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门笔记

HTML 是谁发明的 HTML是由英国计算机科学家李爵士发明。 HTML 起手应该写什么 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <m...
复制链接

扫一扫

专栏目录