HTML入门笔记1
2021-01-01 本文已影响0人
茜Akane
Get Started
- HTML的发明者
- HTML起手式
- 常用的章节标签
- 全局属性
- 常用的内容标签
HTML的发明者
1990年，“万维网之父” 提姆·博纳斯·李（Tim Berners-Lee）及其同事发明了HTML（HyperText Mark-up Language）超文本标记语言。
至此，HTML已经成为目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML起手式
要写一个HTML文件，最开始要写下面这些代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<html lang="zh-CN">将语言设置成中文。
<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用最新的内核。
常用的章节标签
- 标题h1~h6
○ head里面一般是放看不见的元素 - 章节section
- 文章article
- 段落p
- 头部header
- 脚部footer
○ 一般在footer里写©（&加copy;），这是个版权标志 - 主要内容main
- 旁支内容aside
○ 可以写导航 - 划分div
○ 是一个简单的划分，表示括起来的内容是一个整体
全局属性
- class
○ 给标签分个类，做个标记 - contenteditable
○ 可以让这个标签里被显示出来的内容，在页面里被编辑 - hidden
○ 可以将标签里的内容隐藏起来，优先级比style的display none更高 - id
○ id="名称"属性id，但是一般不用id，因为id不报错
○ [id=xxx]{}但是当有两个以上的id为同一名称时，id所在的标签会全部采用该样式
○ 并且id的名字不可以取程序里关键字的名称，例如parent，self等（在控制台打出window.__下面所有的都不可以当作名字） - style
○ style也可以是一个标签
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
*::after, *::before{box-sizing: boder-bx;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
a{color: inherit; text-decoration: none;}
ul, ol{list-style: none;}
</style>
○ 里面定义class的具体属性，.class名称{内容}例如background，color等等。
○ 将style放进body里，并加上style{display: block;}就可以将其显示在页面里
在标签里可以这样写<header style="border：10px solid green;">
○ 当js属性和HTML属性同时存在时，js属性优先
- tabindex
○ 是访问页面时，tab可以访问的地方的顺序，0是最后一个访问，-1是不能访问 - title
○ 当标题太长甚至超出页面范围时让他省略
○ 在<style>里添加下面内容就会省略
#id名/.class名{ white-space: nowrap; text-overflow: ellipsis; overflow: heidden; }
○ 也可以在开发者工具->style里，找到header，在右侧的element.style{}里添加代码
○ 在header里加title="xxx（被省略的内容）"当鼠标移到省略部分时候就会出现这个提示
常用的内容标签
- ol+li(ordered list + list item)
○ 为有序列表，在li里添加之后会有序号 - ul + li (unirdered list + list item)
○ 没有序号的列表 - dl + dt + dd(description list + term + details)
- pre(preview的缩写)
○ 在标题<h></h>里面打再多空格也只有一个空格（回车，tab也是一样）可以显示出来
○ 在<h>中加<pre>标题内容</pre>，就会保留回车，空格，tab - hr（Horizontal Rule）
○ 在句子下方加一个<hr>，就会形成一个水平分割线 - br(break)
○ 加在内容后用来换行 - a(anchor)
○ 一般用来加连接<a href="https://qq.com"></a>
○ 在里面加target="_blank"，会打开新的窗口。中国一般喜欢新开，外国喜欢本页开 - em(emphasis)
○ 强调（语气），默认是斜体
• strong
○ 强调（事情），默认是加粗 - code
○ 用code包起来的代码是等宽的（monospace）
○ 用pre将code包裹起来，可以将代码里的换行，空格等保留下来显示在页面 - q(qoute)
○ 用于简短的行内引用 - blockquote
○ 用于块级元素的引用
