【百度前端学院学习笔记】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 被描述的文字
应用场景: 适用有描述的列表,如简历页面,介绍自己的信息、年龄、住址等。