HTML笔记整理HTML是什么？语义化是什么？HTML 前端开发需要注意什么？HTML常用标签有哪些？HTML基本语法有

HTML

前端开发需要注意什么？

美观、安全、无障碍、性能、兼容，最重要的是功能

HTML是什么？

HTML全称HyperType Markup Language（超文本标记语言）超文本：可以指有超链接，也可以指HTML不仅仅包含文本内容，还包括img图片、title、a链接、table表格。

HTML默认显示的一些标签中，`<!DOCTYPE>`指什么？

它告诉浏览器以哪个HTML版本来渲染。（默认的是<!DOCTYPE html>，即HTML5版本）。

HTML的基本语法有哪些？

标签和属性不区分大小写；
空标签可以不闭合，如<br/>；
属性值推荐用双引号；

HTML一些常用标签

列表元素

有序列表

<ol>
   <li></li>
</ol>

无序列表

<ul>
   <li></li>
</ul>

key-value形式
dt -- key
dd -- value

<dl>
  <dt>我的名字是：</dt>
  <dd>布利啾啾迪不利多</dd>
</dl>

a 链接

<a target = "_blank" />

其中，target属性对应属性值"_blank"表示对应链接在新窗口打开，并非覆盖当前页面。

多媒体

图片

<img src="pages/image.jpg" alt = "这是一张图片" width = "400" />

alt表示：图片未加载出来时替代图片位置的文字；

音频播放器

<audio src = "" controls ></audio>

视频播放器

<video src = "" controls></controls>

在音频播放器和视频播放器元素中，controls表示在浏览器打开时默认显示播放控件。

输入

<input placeholder = 请输入用户名">

属性placeholder：占位符，在用户还未输入内容时，输入框默认显示的内容。

<input type = "range" />

type属性：显示输入框为哪种类型，上例中type = "range"表示输入框为滑动条类型。

<input type = "number" min = "1" max = "10" />

上面这个例子指明：输入框仅限输入数字类型，最短为1个字符，最长为10个字符。

<textarea></textarea>

多行文本输入框，是独立于input的标签。

<label>
   <input type = "checkbox">选项一
   <input type = "checkbox">选项二
<label>

展示结果如下：

<label>
    <input type = "radio" name = "sports">足球
    <input type = "radio" name = "sports">篮球
</label>

type = "radio"即输入框为单选框类型时，利用属性name可以将同类选项归为一类。

文本标签

引用

块级引用：

<blockquote cite = ""></blockquote>

cite属性表示引用来源。

短引用

<cite></cite> //一般用来引用标题，书名
<q></q> // 一般用来引用具体内容

什么是语义化？语义化有什么好处？如何做到语义化？

语义化是指
HTML中元素、属性、属性值都具有某种含义。

语义化好处

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

一个网站的开发和应用都会经历哪些对象？

开发者 - 修改、维护页面（需要遵循统一规则编写）；
浏览器 - 展示页面；
搜索引擎 - 提取关键词，建立索引，排序；
屏幕浏览器 - 盲人阅读页面内容。

HTML笔记整理