HTML学习总结

初识HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写，它定义了网页内容的含义和结构，与CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。

内容

1.标题

HTML 提供了从大到小6级标题，分别是：<h1>、<h2>......<h6>

2.文本格式

标签	作用
<mark>	高亮
<del>	删除文本
<s>	错误
<ins>	文本补充
<small>	缩小
<em>	斜体
<strong>	加粗
<u>	下划线

<font><big><center>等标签皆不推荐使用，html文档的美化应使用CSS

3.超链接 a

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：
(1) href即为要跳转去的地址 URL（Uniform Resorce Locator)
(2) target属性为 _blank 表示在新的页面打开超链接（默认是在当前页面打开即 _self）
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转.先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>

（1） 元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
（2） 超链接中的地址需要有#符号

4.图片及文件路径

（1） 图片
插入图片：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

(a)、src属性为要显示图片文件的位置 URL，即图片文件的路径
(b)、alt属性当获取图片出现问题时显示的文字（占位符）
©、可为图片指定高宽度，但不建议（可能导致图片变形）
（2） 文件路径
以下说明为相对路径

举例	解释
html<img src="picture.jpg">	该图片文件与当前文档在同一目录中
html<img src="./images/picture.jpg">	该图片文件在当前目录下的images目录中
html<img src="../picture.jpg">	该图片文件在上一级目录中

5、表格、列表、表单

表格

标签：<table>

标签	作用
<tr>	行
<td>	行中的单元
<th>	表头的单元

列表

标签	作用
<ul>	无序列表
<ol>	有序列表

无序列表：默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
有序列表：默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

表单

概念：用于采集用户输入的数据的。用于和服务器进行交互。
<form>：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
(1)<action>：指定提交数据的URL
(2)method:指定提交方式
method分类：一共7种，2种比较常用
get：
请求参数会在地址栏中显示。会封装到请求行中 (HTTP协议)
请求参数大小是有限制的。
不太安全。
post：
请求参数不会再地址栏中显示。会封装在请求体中 (HTTP协议)
请求参数的大小没有限制。
较为安全。
表单项中的数据要想被提交：必须指定其name属性
表单项标签：
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio:单选框
注意：
要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值
checkbox：复选框
注意：
一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息。
label：指定输入项的文字描述信息
注意： label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
按钮：
submit：提交按钮。可以提交表单
button：普通按钮
image：图片提交按钮 ：src属性指定图片的路径
select: 下拉列表
子元素：option，指定列表项 属性：seleceted(默认选择)
textarea：文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行。

6、区块及内联

（1） 区块元素：在浏览器显示时，通常会以新行来开始（和结束）如：<h1>, <pre>, <ul>, <table>，<div> 等。
（2） 内联元素：一个接一个进行显示，不会新起一行。如：<span>, <input>, <td>, <a>, <img>等。