前端学习笔记
HTML
-
Hyper Text Mark Language
-
超文本标记语言
文档声明（doctype）
-
文档声明用来告诉浏览器当前网页的版本
-
html5的文档声明
<!doctype html><!Doctype HTML>
DOM树
HTML语法
列表
-
列表（list），html中的列表一共有三种：
-
1.有序列表
-
2.无序列表
-
3.定义列表
-
-
无序列表：使用ul标签来创建无序列表，使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
- 有序列表：使用ol标签来创建有序列表，使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
- 定义列表：使用dl标签来创建有序列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
<dt>表现</dt>
<dt>行为</dt>
</dl>
超链接
-
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
-
使用a标签来定义超链接
-
属性：
-
href 指定跳转的目标路径
-
值可以是一个外部网站的地址
-
也可以写一个内部页面的地址
-
-
target 用来指定超链接打开的位置
-
_self 默认值 在当前页面中打开超链接
-
_blank 在一个新的页面中打开超链接
-
-
-
<a href="https://www.bytedance.com">超链接1</a>
<br><br>
<a href="https://www.bytedance.com">超链接2</a>
多媒体
-
图片标签用于向当前页面中引入一个外部图片
-
使用img标签来引入外部图片，img标签是一个自结束标签
-
src属性 指定的是外部图片的路径
-
alt属性 图片的描述，默认情况下不会显示，但是有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片
-
width 图片的宽度（单位是像素）
-
height 图片的高度
-
-
audio 用来向页面中引入一个外部的音频文件
- controls 是否允许用户控制，不需要给值
-
video 标签用来向网页中引入外部视频文件
输入
-
<input> -
<textarea>用户输入长文字 -
<checkbox>多选 -
<radio>可以用name属性相同限制单选 -
<select>下拉菜单 -
<input list="conturies">辅助用户输入
文本标签
-
<blockquote>外部引用，cite属性代表来源 -
<cite>短引用，书名、章节等 -
<q>引用之前提到过的内容 -
<code>代码 -
<em>用于表示语音语调的加重 -
<strong>用于表示内容重要，加粗
内容划分
-
<header>页面元数据，logo、导航等
-
<main>页面主体 -
<aside> -
<footer>页脚，版权等
语义化标签
-
有助于
-
开发者协作 代码可读性
-
浏览器：用户展示 可维护性
-
搜索引擎：关键词、排序 搜索引擎优化
-
屏幕阅读器：无障碍 eg. 给盲人读页面 提升无障碍性
-
-
传达内容，而不是样式
-
如何做到语义化
-
跨域：引用本域还是外域的资源
