前端-HTML基础

HTML的发展史

1. HTML(Hyper Text Markup Language):超文本标记语言，www万维网的描述性语言

2. HTML5是HTML的第五次重大修改（HTML是W3C与WHATWG合作的结果）

1. W3C：万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构

2. WHATWG：网页超文本应用技术工作小组，是一个以推动HTML5标准为目的而成立的组织，在2004年由Opera、Mozilla基金会和苹果这些浏览器厂商组成

3. XHTML指可扩展超文本标签语言，XHTML 的目标是取代 HTML

网页组成部分

1. HTML结构

2. CSS表现

3. Javascript行为

W3C制定了结构HTML和表现CSS的语法及标准、ECMA制定了JS行为标准

HTML常见标签

1.简单标签

<h1></h1> 文本标题【一个网页只能有一个】特点：文字加粗，并且换行

<h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

<p></p> 段落标签 特点：自带段间距 换行

<b></b>、<stong></stong> 加粗标签 特点：加粗，不换行 文字强调，但又不是标题

<i></i>、<em></em> 倾斜标签 不会换行

<del></del>、<s></s> 删除线 不会换行

、 上标下标

<u></u> 下划线

<br/> 强制换行

<hr/> 水平线 水平居中，本质是border

2.复杂标签

无序列表

1. 标签名称

● 父级标签：ul

● 子级标签：li

2. 属性使用

● type：表示类型，修改列表的符号

（circle空心圆/disc实心圆/square方形） 🎀

特点：自带的有实心圆的项目符号 会换行

<ul type="none">
    <li>文字，图片，标签</li>
    ....
</ul>
<!--注意：type="none"把无序列表自带的实心圆给去掉-->

有序列表

1. 标签名称

● 父级标签：ol

● 子级标签：li

2. 属性使用

● type：表示类型，修改列表的符号（默认为1、a/A/i/I） 🎀🎀🎀

● start：表示开始（属性值为数字，表示从第几个开始显示）

特点：自带的有数字符号

<ol>
    <li>文字，图片，标签</li>
    ...
</ol>

自定义列表

1. 标签名称

● 父级标签：dl

● 子级标签：dt

● 子级标签：dd

<dl>
    <dt>文字，图片，标签</dt>
    <dd>对dl里面的内容进行解释说明</dd>
    <dd></dd>
    .....
</dl>
<!-- 注意，一个dl里有且仅有一个dt,可以有多个dd -->

图片标签

1. 标签名称：<img />

2. 标签属性

● width 宽度

● height高度

插入图片的宽高不写默认是图片本身的宽高

● title：鼠标悬停上去之后的提示信息

● alt：图片不显示之后的提示信息

● src: 图片的路径

路径的使用方法：绝对路径、相对路径 🎀🎀🎀

1. 绝对路径：是指文件在硬盘上真正存在的路径

2. 相对路径：是相对于自己的目标文件位置

● 同级找同级：当前文件与目标文件在同一目录下（直接书写目标文件的文件名+扩展名）

● 父级找子级：当前文件与目标文件所处的文件夹在同一目录下（文件夹名/目标文件全称+扩展名）

● 子级找父级：当前文件所处的文件夹和目标文件在同一目录下（../目标文件文件名+扩展名）

3. 注：路径一些常见其他的情况 🎀🎀🎀

● ./表示当前目录，可以省略不写

● ../表示跳出当前文件夹，有几个文件夹可以写几次

● .../错误写法

超链接标签

1. 标签名称：<a></a>

2. 标签属性

● href：路径

超链接的跳转路径找法和插入图片是完全一样的

● title：鼠标悬停上去之后的提示信息

● target：规定在何处打开文档

○ target=“_self“ 默认值

○ target=“_blank“ 新窗口打开

特点：自带文字变蓝且有 下划线

div和span标签

1. div：没有具体含义，用来划分页面的区域，类似生活中看到的警戒线

2. span：没有具体含义，当与 CSS 一同使用时，元素可用于为部分文本设置样式属性 🎀

区别：div是块级标签会换行可识别宽高；span是行内标签不会换行，且不识别宽高

一些转义字符

1. &lt：小于号

2. &gt：大于号

3. &amp：&

4. &quot：引号

5. &reg：已注册

6. &copy：版权

7. &trade：™

8. &nbsp；不换行空格

表单标签

1. 什么是表单：表单在网页中主要负责数据采集功能、收集用户信息

2. 表单常见标签的使用：表单框/域、表单控件

<form method="get或者post" action="向何处发送表单数据">
  <input type="设置表单控件显示的类型" value="提示文本" placeholder="提示文本" name="绑定数据"/>
</form>

特点：会换行

3. 在form中属性的使用属性

<input /> 自带的有边框 不会换行

• type 定义输入框的类型

• type="text" 文本输入框

• type="password" 密码框

• type="submit" 提交按钮

• type="button" 空按钮 还有一种写法 <button>空按钮</button>

• type="reset" 清空

• value值 提示作用

• placeholder 描述输入字段预期值的简短的提示信息，兼容到IE8以上

• name 在发送数据时候必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

4. get和post的区别

• get是从服务器上获取数据，post是向服务器传送数据。

• get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

• get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB

• get安全性非常低，post安全性较高。但是执行效率却比Post方法好