- html 标签是由尖括号包围的关键字<html>, 通常是成对出现的,例如<html> 和 </html>,称为双标签,标签对中的第一个标签是开始标签,第二个是结束标签; 有些特殊的标签是单个标签, 例如<br />,称为单标签
- 标签关系: 包含(嵌套/父子)关系和并列(兄弟)关系能
- html 基本结构标签
html: 根标签
head: 文档头部
title: 文档标题
body:文档主题 - VSCode 默认不能运行 html,需要安装 open in browser 插件才可以
- JS-CSS-HTML Formatter 每次保存都会自动格式化 js css html 代码
- Auto Rename Tag 自动重命名配对的 html/xml 标签
- CSS Peek 追踪至样式
- <!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用那种 html版本来显示网页, 该声明位于文档最前面的位置,不是 html 标签,是文档类型声明标签
- <html lang="zh-CN"> 表示那种语言
- <meta charset="UTF-8"> 编码方式. 不要写成 utf8 或UTF8
- html 中标签名大小写是没区别的,但是 JSX 中是严格区分大小写的
- 标题标签:<h1> ... <h6> 文字变粗变大, 独立一行显示
- 段落标签:<p> 段和段之间有空隙
- 换行标签:<br /> 换行不会有空隙
- 文本格式化标签: 突出重要性
- 加粗 :
<strong>或者<b> - 倾斜:
<em>或者<i> -
删除线:<del>或者<s> - 下划线 :
<ins>或者<u> - <div> 和 <span> 标签: 这两个是没有语义的,就是个盒子,用来装内容的
- div: 表示分隔、分区, 独占一行
- span: 表示跨度、跨距, 多个显示在一行
-
<hr>标签在 HTML 页面中创建水平线 -
<img>标签: img 标签是单标签, <img src="img.jpg" alt="我是替换文本" title="我是提示文本" /> - src 属性: 是必须的, 传图片路径
- alt 属性: 是替换文本,当图片显示不出来的时候会显示 alt 属性中的内容
- title 属性: 提示文本,鼠标放到图像上,显示的文字
- width 属性: 设置图片的宽度, 和高度只设置一个时候,图片会进行等比例缩放
- height 属性: 设置图片的高度
- border 属性: 设置图片的边框粗细
- 目录文件夹: 就是普通的文件夹,里面不过存放了我们做页面所需要的相关素材
- 根目录: 打开目录文件夹的第一层就是根目录
- 资源相对于 html 的位置
- 同一级路径直接写资源全名
- 下一级路径用
/ - 上一级路径用
../ - 超链接标签
<a>: <a href="http://www.baidu.com" target="_blank"> 百度</a> - href 属性: 用于指定目标的 url 地址, 是必须的,外部路径填写绝对路径,比如: http://www.baidu.com; 内部链接写相对路径就好, 比如: ../src/other.html; 如果 herf 里面的地址是一个文件或者压缩包,就会下载这个文件,比如
<a href="http://www.baidu.com/src/img/image.zip" > - target 属性: 用于指定链接页面打开的方式,其中_self 为默认值, _blank 为在新窗口中打开
- # 可以用来代替空地址: 百度
- 在网页中的各种网页元素都可以添加超链接,比如:文本、图像、表格、音视频等。
- 锚点连接: 点击链接可以快速定位到页面中的某个位置
- 在连接文本的 href 属性中,设置属性值为
#名字的形式,如<a herf="#two"> 第二季</a> - 找到目标位置标签,里面添加一个 id 属性=刚才的名字,如
<h3 id="two">第二季介绍</h3> - 注释标签:
// <!-- 注释 --> ,以<!-- 开头,以-->结尾
-
特殊字符: 在 html 中一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面字符来替代
特殊字符
-
表格标签:
-
<table>是用于定义表格的标签 -
<thead>头部区域 -
<tbody>主题区域 -
<tr>标签用于定义表格中的行,必须嵌套在<table>标签中 -
<th>表头标签,文字会加粗居中显示,必须嵌套在<tr>标签中 -
<td>用于定义表格中的单元格,必须嵌套在<tr>标签中
表格属性
-
合并单元格:
-
合并方式:
跨行合并: rowspan="合并单元格的个数", < td rowspan="2" ></td>
跨列合并: colspan="合并单元格的个数" -
目标单元格(写代码合并的单元格)
跨行: 最上侧单元格为目标单元格,写合并代码
跨列: 最左侧单元格为目标单元格,写合并代码 -
删除多余的单元格
-
列表标签
-
无序列表
<ul>
<ul>标签表示 html 页面中项目的无序列表,列表项使用<li>标签定义
<ul>中只能放<li>标签,<li>标签中可以放所有元素 -
有序列表
<ol>
<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>
标签定义列表项 -
自定义列表
<dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字) 和<dd>(描述每一个项目/名字) 一起使用
<dl>中只能包含<dt>和<dd> -
表单: 主要为了收集用户信息,一个完整的表单通常有表单域、表单控件(也称为表单项)和提示信息 3 个部分构成
-
<form>标签用于定于表单域,以实现用户信息的收集和传递,<form>会把它范围内的表单元素信息提交给服务器,<form action="url" method="提交方式" name="表单域名称"> -
input
-
type: input 的类型
text: 文本框
password: 密码框,用户看不见输入
radio: 单选按钮,实现多选一,多个 input 的name 属性值必须一样
checkbox: 复选框,可以实现多选多,多个 input 的name 属性值必须一样
-
name: 定义 input 元素的名称
-
value: 规定 input 元素的值
-
checked: 规定 input 元素首次加载时应当被选中
-
maxLength: 规定输入字段中的字符的最大长度
-
<label>标签: 用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验, 此时 label 标签的 for 属性值和 input标签 的id 属性值必须一样 -
<select>标签: 下拉表单元素, <select>中包含的是<option>标签, 一个<select>标签中最少包含一个<option>标签,<option>标签中selected 属性为selected 时,当前项即为默认项
-
<textarea> 标签: 用来创建多行文本输入框
ES6
- ES6 中使用关键字 new 创建对象时会默认执行 constructor 构造方法
- constructor 中,子类必须通过 super 来调用父类的构造方法,对父类进行初始化,否则会报错
- ES6 使用 extends 关键字来作为类的继承
网友评论