这是我参与[第五届青训营]伴学笔记创作活动的第1天

一.HTML是什么

1. HTML：HyperText Markup Language

(HyperText释义为超文本,超文本可以有图片,标题,链接,表格多种形式)

(Markup Language释义为标记语言,用开始标签和结束标签来解决问题)

2.在标签上设置一些属性

$<img src="photo.jpg"/>$

 (src:属性名;   pooto.jpg:属性值)

3.代码样例

<!doctype html>
(标记当前文件使用的是那个HTML版本,浏览器根据这个决定具体渲染模式)  
<html>...</html>
(文件根标签,剩下所有内容都是写在根标签里的)
<head>...</head>
(head标签里放一些页面的原数据,即页面需要的但不用呈现在页面上让客户看到的东西)
<body>...</body>
(body里放的我真正需要呈现给客户的内容)

4. DOM树

浏览器在接受HTML代码后进行解析,解析后出一个DOM树

DOM树顾名思义是一个树的结构,它包含文档的节点

即:document里包含html节点

   html里包含head和body

   head里包含meta和title("page title")

   body里包含h1("heading")和p("page content")

(而代码的每个节点我们称之为"DOM节点")

二.HTML的语法

标签和属性不区分大小写,推荐小写

空标签可以不闭合,比如 input,mata

属性值推荐使用双引号包裹

某些属性值可以省略,比如required,readonly

1.标题

有h1~h6六种标题(一级标题,二级标题......六级标题)

2.列表

1>有序列表

(列表中的每一项都有顺序)

<ol>...</ol>内套<li>...</li>
(表示基本的有序数列,会自动生成序数1,2,3)

2>无序列表

(列表前后顺序无太大关系)

<ul>...</ul>内套<li>...</li>
(表示基本的无序数列,会自动生成点)

3>定义列表

(属性名后跟属性值的一类列表)

<dl>...</dl>内套<dt>...</dt>再内套<dd>...</dd>
(dt可以对多个dd)

3.链接

(连接用 "<a 内容 " 表示)

a最重要的一个属性是href(超链接的引用地址)

给href赋值,赋一个想要跳转的链接

1>插入图片

**img**这个标签表示插入图片

**src**表示插入图片的地址

**alt**增加图片的一个属性(若图片无法显示,则输出文字)

**width**宽度,表示这个图片需要多宽

2>插入音乐

**audio**这个标签表示插入音乐

**src**表示插入图片的地址

**controls**表示这个音乐需要浏览器默认显示浏览器的默认空间

3>插入视频

**video**这个标签表示插入视频

**src**表示插入图片的地址

**controls**表示这个音乐需要浏览器默认显示浏览器的默认空间

3.输入

**input**:用来输入

**placeholder**:占位符,即当用户没有输入的时候默认显示什么(输入文本)

**type="range"**:拖动选择范围

**type="number" min="1" max="10"**:告诉最大值最小值,在最大值和最小值中选择值

**type="date" min="2018-02-10"**:选择日期(日历)

**<textarea>内容</textarea>**:用户可以自主输入一段长的内容

4.在已有选项里选择

1>多选

用<input type="checkbox"/>来表示

2>单选

用<input type="radio" name="sport"/>来表示

3>选择比较多,下拉选择

用<select>...</select>表示下拉选择

把选项写在<option>内容</option>中

4>输入东西,出现提示,辅助输入

<datalist>中的<option>是给出用户一些快捷的选择

5.文本标签

1>引用

快捷引用(长引用):

 <blockquote>

 一般直接引用别人的一段话
 
 cite属性:表示我这段话来自哪

$<cite>$ 标签(短引用):

引用了短短几个字,比如书名,人名

引用之前提到的内容

<cite>可以用来引用具体的章节,名字等(<cite>第一章</cite>)
    
<q>可以一般用来引用之前提到过的具体的内容(一般也是短引用)

2>code和强调标签

1>code标签

可以用code标签把代码引起来
代码可长可短
引用多行代码前在<code>标签前加一个<pre>,在</code>后加一个</pre>表示里面是多行代码

2>强调标签

1.strong标签:突出这个东西非常重要紧急
2.em标签:在语气上的一个强调

6.内容划分标签

header标签里放页头(logo,导航(用nav来表示)之类的)
main标签放页面的主体
article标签里可以放一些文章正文
aside标签放与主体相关的,但并不直接属于这个页面内容的一些内容
footer标签放在页面的尾部,里面一般放一些参考链接,版权,备案之类

三.语义化是什么

HTML中的元素,属性及属性值都拥有某些含义

开发者应该遵循语义来编写HTML
  例如:有序列表用ol;无序列表用ul
       lang属性表示内容所使用的语言

四.谁在使用我们写的HTML

开发者-修改,维护页面
浏览器-展示页面
搜索引擎-提取关键词,排序
屏幕阅读器-给盲人读页面内容

五.语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

六.如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

七.总结

本节课围绕"前端要解决的基本问题"及"什么是HTML"两个基本问题展开,层层解析前端技术栈的构成,以及作为前端最基础的奇数-HTML基本语法和基本功能以及在实际研发过程中如何做到HTML语义化.

前端与HTML | 青训营笔记