HTML标签

芝麻凛 2021年08月04日 112次浏览

HTML学习笔记

1990年李爵士发明了WWW(万维网)= URL、HTML、HTTP。

万维网是基于互联网实现的输入地址就能访问网页的技术。

CRM学习法

copy -- 抄文档、抄别人

run -- 跑起来、

Modify -- 加入自己的想法,然后再跑起来

HTML的语法

标签语法

<!DOCTYPE html>	//文档类型
<tag attr=value>内容</tag>    
<tag attr>内容</tag> 
<tag attr=value>
<!DOCTYPE html> 文档类型
<html lang="en">	html标签,可以把lang改成zh-CN
<head>
    <meta charset="UTF-8">	文件字符编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">	告诉IE使用最新内核
    <meta name="viewport" content="width=device-width, initial-scale=1.0">	禁用缩放 兼容手机
    <title>Document</title>
</head>
<body>
</body>
</html>

章节标签

表示文章的层级

标题标签 h1~h6、章节标签 section、文章标签 article、段落标签 p、头部标签 header、底部标签 footer、主要内容 main、

旁支标签 aside、划分 div

全局属性:所有标签都有的属性

class、contenteditable、hidden、id、style、tabindex、title

id可能并非唯一,不到万不得已不用id,因为id不报错。

默认样式:

Elements -> Style -> user agent stylesheet(浏览器)

CSS reset 默认样式已经不符合需求了。

常见的CSS reset,可以选择进入大厂首页,Chrome开发者工具,找类似代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

内容标签:

ol + li(有序列表)、ul + li(无序列表)、 dl + dt + dd(description list) 、pre(当需要保留空格、table时使用)、hr(分割线)、br(换行)、a(超链接)、em(强调)、strong(重要)、code(显示代码)、quote(引用标签)、blockquote(块级引用元素)

HTML重点标签

a标签

属性:href、target、download、rel=noopener

作用:跳转外部页面、跳转内部锚点、跳转到邮箱或电话等

yarn global add http-server

http-server . -c-1 预览网页

a的href的取值

网址:https://google.comhttp://google.com、//google.com

路径:/a/b/c 以及 a/b/c、index.html 以及 ./index.html

伪协议:javascript:代码;(javascript:;空的伪协议)、mailto:邮箱、tel:手机号、id:href=#XXX

a的target的取值

_blank(在空白页面打开)、_top(在顶级窗口打开)、_parent(在当前链接的上一层打开)、_self(默认值,在当前页面打开)

target="xxxx"给窗口命名。

a的download:作用不是打开页面,而是下载页面(但不是所有浏览器的都支持)。

iframe标签:内嵌窗口,以及很少使用了。

table标签

<tr></tr>  //table row

table相关标签:table、thead、tbody、tfoot、tr、td、th、

相关的样式:table-layout、border-collapse、border-spacing

img标签(永远不要让图片变形)

作用:发出get请求,展示一张图片

属性:alt(替换)、height、width、src

事件:onload、onerror

响应式:max-width: 100%

form标签

作用:发get或post请求,然后刷新页面

属性:action、autocomplete、method、target

事件:onsubmit

input标签

作用:让用户输入内容

属性:类型 type:button、checkbox、email、file、hidden、number、password、radio、search、submit、tel、text

​ 其他 name、autofocus、checked、disabled、maxlength、pattern、value、placeholder

事件:onchange、onfocus、onblur

验证器:HTML5新增功能 required

其他的输入标签:textarea多行文本,select+option下拉菜单。label(表示用户界面中某个元素的说明。)

注意事项:一般不监听input的click事件,form里面的input要有name,form里面要放一个type=submit才能触发submit事件

其他标签:video、audio、canvas、svg 这些标签有一定兼容性问题