html标签

买米当卡思思酱

已于 2022-08-05 16:02:33 修改

阅读量172

点赞数

文章标签： html5

于 2022-08-02 01:13:57 首次发布

本文链接：https://blog.youkuaiyun.com/yulingpan123/article/details/126112113

版权

1.常见英语

2.html骨架

1.快捷生成：！，html:5

2.骨架语句含义

head内一般写看不见的元素。
html根标签，lang（language）属性，页面语言。en英语，zh-CN中文简体。
charset写的编码和当前文件实际编码不同就会乱码。
title网页标题

3.标签和属性

1.章节标签（表示文章层级）

标题 h1~h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div

2.html全局属性（所有标签都有的属性）

class 类

一个标签可以有多个类值，.选择器表示包含这个属性值。例：<div class='middle bordered'>

contenteditable 内容可编辑

指定元素内容可编辑。例：<h1 contenteditable>

hidden 隐藏

对元素进行隐藏。例：<header hidden>

id和css配合：id 属性在 HTML 文档中必须是全局唯一的。由于id属性不会报错，因此尽量不使用id而使用class属性。例：<section id='xxx'>

id和js配合：js可以通过id获取元素。但是关键词和保留词不能作为id名。

例：xxx.style.border = '3px solid green'。（实质就是dom获取元素:document.getElementById("xxx")；返回对拥有指定 ID 的第一个对象的引用。）

style 样式

style 属性规定元素的行内样式（inline style）。style作为html的属性比css的优先级高，但是比js优先级低。通过js调用style属性时会进行覆盖。

例：<h3 style='border: 1px solid red'>1.2</h3>/xxx.style.border = '1px solid red'

tabindex tab键索引排序

所有页面可交互元素都可以用tab键访问。tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。正数值小优先级大，tabindex=0最后一个被访问，负数不能被选中。例：<aside tabindex=2>

title 提示信息

鼠标移到元素上时显示一段额外提示信息文本。注意这段信息与隐藏的文字无关是一段新的文本内容。例： <p title='鼠标停留的提示信息'>

3.小技巧

style标签放入body中时，添加语句style{display: block;}可以使style显示。此时配合contenteditable属性，就可以自定义编辑样式啦！

页面源码：JS Bin - Collaborative JavaScript Debugging

文字太长只显示一行后面用省略号形式表示，三行命令

white-space: nowrap; //文字内容不换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //溢出用省略号表示

效果展示：

4.html默认样式&css reset

1.html标签的默认样式

产生原因：html刚发明的时候还没有产生css，于是出现了标签的默认样式

如何查看：使用chrome开发者工具查看默认样式。检查>Elements>Styles>user agent stylesheet（浏览器样式）

清空默认样式：css reset。默认样式不符合需求，css reset进行样式覆盖清空默认样式。

2.常见css reset

*{margin: 0;padding: 0;box-sizing: border-box;}

外边距0，内边距0，盒模型为border-box。

*::after;*::before{box-sizing: border-box}

伪类 before, after 使用所有的元素都使用 border-box 。

h1,h2,h3,h4,h5,h6{font-weight: normal}

h1~h6标签不加粗。

a { color: inherit;text-decoration: none; }

a标签超链接，点击后文字不改颜色（inherit继承），取消下划线。一般使用border-bottom重做下划线样式。

ol,ul {list-style: none;}

去除有序/无序列表默认样式。

table {border-collapse: collapse;border-spacing: 0;}

边框合并，边框边框无间隙。（两句话同一个作用，但是ie可能只支持第二种。）

方方的css reset：css reset · GitHub

5.内容标签

ol+li（ordered list+list item）有序列表+列表项
ul+li（unordered list+list item）无序列表+列表项
dl+dt+dd（description list/term/data）描述列表/描述项/描述数据
pre（preview预览）预格式化文本。保留空格回车tab，字体等宽，字母不等宽。
code 格式化代码文本。字母字体都等宽，不保留空格回车tab，多个空格只变成一个。一般使用pre+code合并使用放入代码块。
hr 水平线，单
br（break）换行，单
a（anchor锚）超链接，target="_blank"新窗口打开。
strong/b（bold粗体）加粗
em（emphasis强调）/i（italic斜体）倾斜
q（quote）引用。默认加引号，内联引用不换行。
blockquote 块引用。块引用自动换行新写，无引号。

注：HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格。

我的页面：JS Bin - Collaborative JavaScript Debugging