HTML入门笔记1

HTML 是谁发明的

WWW万维网由HTML,URL,HTTP三者构建而成,该技术的发明者是李爵爷(Tim Berners-Lee),该技术先把信息组织成为图文并茂的超文本，然后利用链接从一个站点跳到另个站点,彻底摆脱了以前查询工具只能按特定路径一步步地查找信息的限制.

HTML起手

<!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>
    <base href="https://example.com">
</head>

head标签和meta标签

head标签中存放不会展示的内容，存放页面的元数据，而meta标签是‘官方’的元数据的标签，具体地指定一个个元数据

<!DOCTYPE html> 声明采用H5标准的,启用标准模式,若无,会启动混乱模式.如果想采用之前的标准可以像这样<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 声明网页语言
<head></head>head标签具有不可见属性
<meta charset="UTF-8"> meta表示元数据,关于数据的数据,声明字符集,utf-8实际上指万国码其中一种编码形式
<meta http-equiv="X-UA-Compatible" content="IE=edge">content表示优先采用IE11版本
<meta name="viewport" content="width=device-width, initial-scale=1.0">禁用缩放，适配移动端
<title>Document</title> 网页标题
<base href="https://example.com"> 指定页面中相对路径的基础路径

块级元素和内联元素

块级元素有：div h1~h6 p ul ol li
内联元素：span a em strong i label
块级元素的特点： 1.独占一行 2. 可设置长宽 3. 在不设置宽度的情况下子元素的宽度（content+padding+border）默认等于父元素内容（content） 的宽度
内联元素的特点： 1.不可宽高，尺寸为内容尺寸

常用的表章节的标签(语义化标签)

使用语义标签的优点,利用机器抓取内容,如SEO优化.代码结构清晰,利于开发人员阅读

h1~h6指head标题
section指章节
article指文章
main指主要内容
aside指次要内容

全局属性有哪些

contenteditable使元素可见可编辑
tabindex指tab键盘顺序号,-1为不会被tab选中,0表示最后被选中,其他为任意正整数,不必连续如1,3,6
hidden指隐藏
id指指定全局唯一的元素,但不会报错,能不用不用
style指css样式
title指提示文本
data-指自定义属性
dir表示指示元素中文本的方向,ltr从左到右 ,rtl从右到左

常用的内容标签

dl指definition list定义列表
dt指definition term定义项
dd指definition description定义描述
a指anchor链接
strong指重要的
em指强调的
code指代码块
pre保留空格和换行
quote指引用
hr水平分割线
ol指ordered list有序列表
ul指unordered list无序列表
li指list items列表项