HTML入门笔记1&让<style>显示出来的小技巧

2022-05-27 138 阅读2分钟

HTML是由谁发明的

HTML由李爵士发明

HTML起手应该写什么

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    
</body>
</html>
<!-- 该段代码可在VScode中输入!后按Tab自动生成 -->

HTML起始应该由<!DOCTYPE html>开头，注意大小写
<html lang="zh-CN"> </html>告诉浏览器该网页是中文网页
该段代码不在网页中显示

<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> </body>该段代码为内容主体

常用的表章节的标签有哪些，分别是什么意思

h1-h6 表示一级标题指六级标题
section 表示一个章节
article 表示文章
p 表示paragraph段落
header 表示头部（顶层广告）
footer 表示底部（底部广告）
main 表示主要内容
aside 表示旁支内容
div 表示划分

全局属性有哪些

class 相当于给标签打上了一个标签，可用空格分开class="tag1 tag2..."
contenteditable 表示该元素内容可编辑，可用于实现文本编辑器
hidden 隐藏该元素
id 表示全局唯一元素名，可在JS中直接引用，与class功能类似，但是细节较多，能避免使用则避免使用id=""
style 给该元素加上特定的格式
tabindex 告诉该元素响应tab键的顺序。0表示最后响应，-1表示不响应，tabindex值可以不连续
title 鼠标悬浮在该元素上时显示的内容

常用的内容标签有哪些，分别是什么意思

ol+li 有序列表及列表项，有1234编号的 ordered list & list item
ul+li 无序列表及列表项，无编号 unordered list & list item
dl+dt+dd 带描述的列表 description list & term & data
pre 可以让其中的内容展现出多个空格或换行 preview
hr 水平分割线
br 使该行内容换行 break
a 插入链接 anchor
em 强调（语气），默认格式下被强调内容变成斜体 emphasis
strong 强调（语义），默认格式下被强调内容变为粗体 strong
code 被包裹内容以代码形式呈现
q 引用，没变化 quote
blockquote 块引用，默认格式下被引用内容会换行并缩进

小技巧：让style显示在网页中并可以编辑

目的：方便调试

代码实现：

<body>
    <style contenteditable>
        style{display: block; border: 1px solid red;}
        .middle{}
        .bordered{}
    </style>
</body>

可以在网页内容中展示出<style contenteditable></style>中间的所有内容，并且这些内容可以更改，同时网内内容也随之更改。

使<style></style>显示出来的代码为style{display: block; border: 1px solid red;}，同时要注意该段代码必须写在<body></body>内，若在<head></head>内则无法显示。