2021-07-21

Day01 html基础

一.关于html

（1）html:（Hyper Text Markup Language ） 超文本标记语言

（2）编辑器：Visual Studio Code

二.基本语法

• 标签:写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；

• 属性:标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序

三.常用标签

1. 文本标题标签：
文本标题共有6个（headline）
<h1> 一级标题<h1>(唯一性,放网站LOGO)
<h2> 二级标题<h2>
…
<h6> 二级标题<h6&igt;
2. 字体倾斜标签：
文本倾斜:
<i></i>（italic斜体的）
文本加粗：
<b></b>（bold-粗体字）

3. 文本强调标签：
<strong></strong>
<em></em>
4. 段落标签：
<p></p>
5. 小段文本：
<span></span>
6. 换行：
<br>
7. 水平线：
<hr>
8. 上下标：
 上标
上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。
 下标
下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。
9. 常用转义字符：
&nbsp； 不换行空格
&gt； >右尖括号
&lt； <左尖括号
&copy； 备案中图标版权 ©
10. 列表：
无序列表：
<ul>（unordered List）
<li>列表项内容 ⁢/li>
<li>列表项内容 ⁢/li>
<li>列表项内容 ⁢/li>
…
⁢/ul>
有序列表：
<ol>（unordered List）
<li>列表项内容 ⁢/li>
<li>列表项内容 ⁢/li>
<li>列表项内容 ⁢/li>
…
⁢/ol>
对于列表而言，无论是有序列表还是无序列表，都有type属性。对于无序列表而言，其type属性可取值有circle（空心圆），square（方形），disc（实心圆）。对于有序列表而言，其取值可以是1，A，a等。
除此之外还有自定义列表，此处不叙述。
11. 超链接：
<a    href=“url”       target=" "></a>
属性：
href = ‘url’;规定链接指向的页面的URL
target = “”;设置超链接的打开方式
_blank:新窗口打开
_self:本窗口打开,默认的打开方式
_top 在顶层WINDOW对象中打开,一般用于多层框架嵌套的情况
_parent 在父窗口打开,一般用于框架内的窗口改变父页面
13.图片：
<img>-单标签
属性：
src = ‘url’;规定显示图像的 URL-路径
alt = ‘’;规定图像的替代文本, 用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容
title = ‘文本’;在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的;
14.表格：
<table>
<tr>-table row
<td></td>-table data
<td></td>
</tr>
</table>

table: 标签定义HTML表格
tr: 元素定义表格行(table row)
td: 元素定义表格单元(table data数据)格
14.表单：
form标签：用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。
         name 属性：规定表单的名称，form元素的name属性提供了一种在脚本中引用表单的方法
         action属性：规定当提交表单时，向何处发送表单数据。
         method属性：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）浏览器使用method属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。
表单控件：
<input type />:定义input标签控件;
type属性： 规定input元素的类型；
value属性：为input元素设定值；
name属性：规定input元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据，只有设置了name属性的表单元素才能在提交表单时传递它们的值。
placeholder属性：设置用户填写输入字段的提示

1文本输入框 
    <input type="text" />   
    maxlength属性：规定输入字段中的字符的最大长度
    size属性：定义输入字段的宽度（扩展）

2)密码框

<input type="password" />

3)提交按钮

<input type="submit" value="按钮内容" />

4)重置按钮

<input type="reset" value="按钮内容" />

5)空按钮

<input type="button" value="按钮内容" />

value属性在type= "button ", "reset”, "submit " 的标签上，表示定义按钮上的显示的文本

拓展：post/get

• (1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
• (2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
• (3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的 请求头 中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的 请求体 中。
• (4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。
• (5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。