HTML学习总结
HTML简介
1.HTML的定义
- HTML是超文本标记语言(HyperText Markup Language)的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
2.HTML的用途(地位)
- HTML是构成web世界的砖瓦。它定义了网页内容的含义和结构。
3.HTML的定位
- HTML不是一门编程语言，而是一种用于定义结构的标记语言。
HTML文档结构
HTML元素
用于一个展示段落的元素：
- 开始标签
<p>表示元素从这里开始起作用 - 结束标签
</p>:表示着元素的结尾 - 内容：元素的内容
- 元素：开始标签、结束标签与内容相结合
<html>元素:
<html></html>：这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head>元素：
<head></head>:这个元素是一个容器，包含了想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等。
<meta charset="utf-8">:
- 这个元素设置文档使用utf-8字符集编码。
<link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon">：
- 指定页面的图标，出现在浏览器上。
<title></title>:
- 设置页面标题，出现在浏览器标签上。
<body></body>:
- 包含能在页面上看到的所有内容。
注释：
- 为了将一段HTML中的内容设置为注释，可以用到
<!--和-->将其包括起来。
空元素：
- 只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西
- 例如：换行：
<br>水平分割线：<hr>输入框：<input>
元素的属性：
- 一个元素必须包括：
1.一个空格，在属性和元素名称之间、
2.属性名称，后面跟着一个“=”号。
3.一个属性值，由一对引号“”引起来。
标题
- HTML提供了从大到小6级标题，分别是
<h1>~<h6>。
文本格式
<p><del> </del></p><p><s> </s></p><p><ins> </ins></p><p><u> </u></p><p><small> </small></p><p><strong> </strong></p><p><em> </em></p>
超链接
- 超链接的语法：
<a href="https://www.baidu.com/" target="_blank>百度一下</a>
-说明：
1.href即为要跳转去的地址URL。
2.target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即为_self)
3.超链接标签包含的内容即为显示在页面上拱用户点击的。
锚点
- 锚点的定义：锚点，也称书签，用于标记页面的某个元素或位置。
- 锚点的作用：在长页面内实现跳转。
- 使用方法： 先使用
id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。 - 注意事项：
1.元素的id值必须是唯一的。
2.超链接中的地址需要有#符号。
图片
-
图片的用法：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200"> -
说明：
1.src属性为要显示图片文件的位置URL，即图片文件的路径。
2.alt属性当获取图片出现问题时显示的文字(占位符)。
3.可以为图片指定高宽度，但不建议(可能导致图片变形)。
文件路径
- 为了获取图片文件，我们需要指定该文件位于何处，即文件路径。
表格Table
- 页面的内容有时需要用表格来进行呈现，使用
<table>等标签即可。
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<tr>表示行，<td>表示行中的单元，<th>是表头的单元(将会加粗显示)。
列表List
- 页面的内容也可以使用列表来呈现。列表分为有序和无序两种。
- 无序列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
-
无序列表使用
<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。 -
有序列表：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- 有序列表使用
<ol>标签，默认使用数字作为每项的标志，其它标志可以是大写字母A，小写字母a，罗马数字i等。
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
表单Form
- 当网站需要获取一些信息例如：用户名、密码、选择信息等时，需要使用表单(form)来让用户填写1或选择。
<form>
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄：<br>
<input type="number" name="age" min="18" value="18"><br>
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female" checked> 女<br>
<input type="radio" name="gender" value="other" checked> 其他<br>
党派:<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
您有哪些交通工具:<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
您的工作日期：<br>
<input type="date"><br>
上传您的照片:<br>
<input type="file" name="photo"><br>
您的建议:<br>
<textarea name="message" rows="5" clos="30">
The cat was playing in the garden.
</textarea><br><hr>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
- 注意事项：当提交时，表单中没有
name属性的元素将不会提交，有name属性的元素其value的值将提交给服务器。
区块元素
- 区块元素在浏览器显示时，通常以新行来开始(和结束)。例如：
<h1>,<pre>,<ul>,<table>,<div>等。
内联元素
- 内联元素在浏览器显示时，通畅一个接一个进项显示，不会新起一行。例如：
<span>,<input>,<td>,<a>,<img>等。
预设格式
- 在网页中展示一首诗或一些特别格式的文本，使用
pre标签。
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
