这是我参加青训营的第1天

一.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>$可以用来引用具体的章节,名字等(第一章)

  $<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语义化.