【百度前端学院学习笔记】Day2 HTML基础
1、HTML是什么，HTML5是什么
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML5是最新的HTML标准，拥有更丰富的语义、图形以及多媒体元素等内容，据说不会再更新新的版本，就像win10那样。
2、HTML元素标签、属性都是什么概念？
HTML不是编程语言，是标记语言，所以要使用标记标签来描述网页。
属性是用来提供HTML标签更多的信息。
3、文档类型是什么概念，起什么作用？
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。4、meta标签都用来做什么的？
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部<head></head>，不包含任何内容。 标签的属性定义了与文档相关联的 名称/值 对。
例如：
为搜索引擎提供关键词：
<meta name="keywords" content="HTML, CSS, JavaScript">
网页简介：
<meta name="description" content="Free Web tutorials for HTML and CSS">
设置网页刷新频率：
<meta http-equiv="refresh" content="30">
让网页在不同设备以一定比例显示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5、Web语义化是什么，是为了解决什么问题
HTML的每个标签都有其特定含义(语义),Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
6、链接是什么概念，对应什么标签？
-
超文本:
标记语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来。读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它将整个 Web 网络连接起来。 -
超链接：
超文本的基本特征就是可以超链接文档；你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网上的任何位置的文档中。 -
HTML
<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
<a href="http://www.w3school.com.cn/">访问 W3School</a>
上面这行代码显示为：访问 W3School
点击这个超链接会把用户带到 W3School 的首页。
提示：“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
7、常用标签都有哪些，都适合用在什么场景
下面是一个默认的html5模板填充了一丢丢内容
<!DOCTYPE html> //文档类型：html5
<html lang="en"> //html的根标签/元素，网页所有的内容都要写在里面
<head> // head中的内容不会出现在网页中，帮助浏览器或搜索引擎解析网页
<meta charset="UTF-8"> //编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // 视口的样式
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> //网页的标题，会出现在浏览器的标题栏，搜索引擎主要根据title中的内容判断网页的内容
</head>
<body> //html的子元素，表示网页的主题，网页中所有可见的内容都应该写在body里
<h1>Hello World!</h1>
<h2>123345</h2>
<h3>huhonghao</h3>
<h5>hhh</h5>
</body>
</html>
除了上面的<html></html>\ <head></head>\ <meta></meta>\ <title></title>\ <body></body>\ <h1></h1>\ 之外，还有常用标签：
- paragraph
<p></p> - span
<span></span>
span标签是没有语义的，它的作用就是为了设置单独的样式用的。
例如：
html 长这样
显示效果 是这样
这个是span:
这个也是span
甚至这个小图标都是span
放上w3school的描述：
span和div的区别就在于一个是行内元素，一个是块元素。
- break
<br>
在需要加回车换行的地方加入br，br标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有br、hr和img。 - division
<div></div>
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。用id属性来为div提供唯一的名称，必须唯一。
这个是div
这个也是div
- image
<img>
插入图片
img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。
8、表单标签都有哪些，对应着什么功能，都有哪些属性
form: 构成一个表单
form下包含了以下元素：
input 输入
- text 文本输入
- radio （radiobuttons）单选按钮
其中
id对应lable标签的内容，也就是Male\Female\Other；
name为控件命名，以备后台程序 ASP、PHP 使用。同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用；
value就是选中这个圈后，提交后给服务器的值（后台程序PHP使用）；
checked表示是否默认选择，像这里的Female就是默认选中。
- password 密码
- checkbox 复选框
button 按钮
textarea 多行文字
select 下拉选择
<!DOCTYPE html>
<html>
<body>
<h1>The label element</h1>
<p>Click on one of the text labels to toggle the related radio button:</p>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="text" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
9、ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子
ol: ordered list 有数字标号
ul: unordered list 无数字标号
li: list 嵌套在ol或ul里表示单个选项
**应用场景：**如新闻展示页面，一共N条新闻，点进去可浏览详情。
dl: describe list
dd: describe description 具体描述
dt: describe text 被描述的文字
应用场景： 适用有描述的列表，如简历页面，介绍自己的信息、年龄、住址等。
4842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
