前端入门 - 基础语言篇
前端与HTML
HyperText Markup Language 超文本标记语言
!doctype html 最重要，计算机会据此选择版本进行渲染
html
head
元数据
/head
body
展现给用户的
/body
/html
DOM树：document= html = head body ......
语法：
- 标签和属性推荐用小写
- 空标签可以不闭合，input meta
- 属性值推荐用双引号包裹
- required、readonly可以省略属性值
标题： h1 -- h6 分为6级标题
列表：
-
有序列表(order list) ** ol **
- li (list item)
-
无序列表(unorder list) ** ul **
- li (list item)
-
py6(definition list) ** dl **
- dt (definition title) 标题
- dd (definition description) 内容
链接： a href = "" terget = "*blank" 通过 *terget = " blank"**设置在新窗口打开超链接
多媒体：
-
图片： img src = "" alt = "" width = ""
（当用户打开省流量模式时，不会显示图片，但会显示属性alt对应的属性值）
-
音频： audio src = "" controls (controls属性表示显示播放按钮、进度条、时间)
-
视频： video src=" " controls
输入：
-
input
- placeholder = " " 占位符，用户没有进行输入时的显示
- type = "range" 界面会显示一个滑动块，让用户进行选择
- type = "number" min="1" max="10" 进行一个范围内的输入
- type = "data" 日期选择框
-
textarea 用户可以在此进行多行的输入
选择框：
-
单选框。通过type = "radio" 设置单选框，通过name = " "来设置同一name的选项
lable input type = "radio" name = "sport"/ 篮球 /label
lable input type = "radio" name = "sport"/ 足球 /label
-
复选框。可以进行多选。
lable input type = "checkbox" / 篮球 /label
lable input type = "checkbox" / 足球 /label
-
下拉选择。select 标签创建下拉选择框。option标签加入选择。
-
提示选择。用户可以在input框中输入a，然后会有对应的提示。
datalist 设置提示，input通过list = " " 来接收提示
input list = "countries"/
通过 datalist id = "countries"
option 进行选项的设置
文本类标签：
-
引用：
- blockquote:快捷引用(长引用) 直接去引用别人的一段话 cite = "表示引用的这段文字的来源"
- cite:短引用 引用书的名字等。 (作品名称或章节)
- q:短引用 之前讲过的内容需要再拿出来引用 (引用的内容)
-
code:代码
-
强调:
- strong: 严重、紧急、强调很重要
- em: 语气上的强调，一段话中需要重读的词
内容划分
语义化：
语义化：HTML中的元素、属性及属性值拥有的含义。
遵循语义去编写HTML。
例子：如果html文件中写了lang = "chinese"，表示页面是中文，可以清晰的告诉浏览器。如果没有写，就需要浏览器猜页面是中文还是英文。
作用：方便开发者修改、维护页面，协作开发。搜索引擎优化。提升无障碍性。
注意：传达内容，而不是样式
如何做到语义化： (可以看MDN文档)
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
