HTML基础

HTML是什么？
HTML两种标签分类
HTML标签
HTML常见标签
列表标签
表格标签
表单标签
其他
- label标签
- textarea多行文本
牛刀小试

HTML是什么？

超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名：.html或.htm
HTML是一种标记语言(markup language)，它不是一种编程语言。HTML使用标签来描述网页。

HTTP协议

# 作用: 
    规定了游览器与服务器之间数据交互的方式及其他一些事项
# 四大特性:
    基于请求响应
	即服务器永远不会主动给客户端发送消息 必须要客户端先发请求
    基于TCP、IP用于于应用层之上的协议
	应(HTTP)、表、网、数、物
    无状态
	不会保留客户端的状态信息
    无连接(短连接)
	两者请求之后立刻断开联系
# 数据格式
    请求格式
	请求首行(网络请求的方法)
	请求头(一堆K:V键值对 换行符不能省略)
	请求体(并不是所有的请求都有的)
    响应格式
	响应首行(响应状态码)
	响应头(一堆K:V键值对 换行符不能省略)
	响应体(服务端即将交给游览器的数据)
# 响应状态码
    一串数字来表达中文的意思
	1XX	服务端已经接收到了数据 正在处理 可以继续发送数据也可以等待
	2XX	200 OK请求成功 服务端返回了相应的数据
	3XX	302/304重定向(原本想访问A液面 但是自动跳转到B界面)
	4XX	404 请求资源不存在/403 没有权限访问
	5XX	服务器内部错误
# HTML语法注释
    <!--单行注释-->
    <!--
    多行注释
    多行注释
    -->
# HTML文档结构
    <html>
        <head>编写给游览器查看的内容</head>
        <body>编写给用户查看的内容</body>
    </html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档> 的头部(head)和主体(body)。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显> 示。包含了文档的元(meta)数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
ps: 对于中文网页需要使用声明编码，否则会出现乱码。

HTML两种标签分类

按表达形式

双标签(有头有尾)
    <a></a>
自闭合标签(单标签)
    <img/>

按所占空间

块儿级标签
    独占一行  eg: h1-h6、p
行内标签
    根据自身文本的大小  eg: u、i、s、b

HTML标签

标签格式

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src=”1.jpg” />等。
标签里面可以有若干属性，也可以不带属性。

标签语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个重要的属性

id(个体查找)：定义标签的唯一ID，HTML文档树中唯一类似于标签的身份证号在同一个html页面上id不能重复
class(群体查找)：为html元素定义一个或多个类名(classname)(CSS样式类名)类似于python面向对象中的类的继承可以将多个标签划为一类<h1 class=’c1′></h1><p class=’c1′></p>一个标签可以有很多类<h1 class=’c1 c2′></h1>
style：规定元素的行内样式(CSS样式)

HTML常见标签

HTML常用符号

符号	含义
	空格
>	>
<	<
&	&
¥	￥
©	版权
®	注册商标

head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件，即添加弹窗
<link/>	引入外部样式表文件或网站图标
<meta/>	定义网页原信息

body内常用标签

<h1></h1>  	标题标签
<p></p>  	段落标签
<b>加粗</b>
<i>斜体</i>  <em>斜体</em>
<u>下划线</u>
<s>删除线</s>

<br></br>  	换行
<hr></hr>	水平分割线

Meta标签

介绍

<meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http-equiv属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name属性

主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
```
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="aaaa">
```

布局标签div/span

div

块儿级标签,div标签用来定义一个块级元素
前期的页面布局

span

用来定义内联(行内)元素

关于标签嵌套问题

通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。

a标签

'''
URL: 统一资源定位符
网址不专业
'''
链接标签
<a href="www.baidu.com"></a>
用法一: 通过href属性指定网址点击跳转
    跳转过程有两种方式
    当前页面跳转
    target="_self"  默认当前页面跳转
    新建页面跳转
    target="_blank"
用法二: 锚点功能
    通过href属性指定标签的id值，点击即可跳转对应位置

img标签

<img 
src="图片的路径" 
alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" 
width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

列表标签

无序列表

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>

# type属性
    disc(实心圆点，默认值)
    circle(空心圆圈)
    square(实心方块)
    none(无样式)

有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

# type属性
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马

标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

'''
emat语法
ul>li{$$$}*10
'''

表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构：

<table border="1">
    <thead>
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>手机号</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th>alan</th>
    <th>18</th>
    <th>110</th>
    </tr>
    <tr>
    <th>alearn</th>
    <th>18</th>
    <th>119</th>
    </tr>
    </tbody>
    </table>

属性:

属性	含义
border	表格边框
cellpadding	内边距
cellspacing	外边距
width	像素百分比.(最好通过css来设置长宽)
rowspan	单元格竖跨多少行
colspan	单元格横跨多少列(即合并单元格)

表单标签

功能: 获取用户的数据并发送给后端

获取用户数据最常见的标签就是input标签(行内标签)

input标签是前端里面的变形金刚
通过type参数的不同变换不同的表现形式
text
password
date

直接编写input会出现黄色阴影提示，原因在于input需要结合lable一起使用

方式一:
lable包裹input
方式二:
label与input绑定id

form表单提交数据

数据的提交地址由form表单的action参数来控制
action=”URL”
不写默认朝当前页面所在的地址提交
method=”数据的提交方式”
get post put delete patch…

input标签

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text” />
password	密码输入框	<input type=”password” />
date	日期输入框	<input type=”date” />
checkbox	复选框	<input type=”checkbox” checked=”checked” />
radio	单选框	<input type=”radio” />
submit	提交按钮	<input type=”submit” value=”提交” />
reset	重置按钮	<input type=”reset” value=”重置” />
button	普通按钮	<input type=”button” value=”普通按钮” />
hidden	隐藏输入框	<input type=”hidden” />
file	文本选择框	<input type=”file” />

属性
    name：表单提交时的“键”，注意和id的区别
    value：表单提交时对应项的值
        type=”button”, “reset”, “submit”时，为按钮上显示的文本年内容
        type=”text”,”password”,”hidden”时，为输入框的初始值
        type=”checkbox”, “radio”, “file”，为输入相关联的值
    checked：radio和checkbox默认被选中的项
    readonly：text和password设置只读
    disabled：所有input均适用

select标签

# 单选
<select name="" id="">
    <option value="">上海</option>
    <option value="">杭州</option>
    <option value="">合肥</option>
</select>
# 多选
 <select name="" id="" multiple>
    <option value="">f1</option>
    <option value="">f2</option>
    <option value="">f3</option>
</select>

# 属性说明：
   multiple：布尔属性，设置后为多选，否则默认单选
   disabled：禁用
   selected：默认选中该项
   value：定义提交时的选项值

其他

label标签

定义

<label> 标签为 input 元素定义标注(标记)。

说明

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：
    name：名称
    rows：行数
    cols：列数
    disabled：禁用

牛刀小试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>注册页面</h2>
    <form action="" method="">
        <p>
            <label for="d1">username>>>:</label>
            <input type="text" id="d1">
        </p>
        <p>password>>>: <input type="password"></p>
        <p>birthday>>>: <input type="date"></p>
        <p>gender>>>:
            <input type="radio" name="gender" checked="checked">male
            <input type="radio" name="gender">female
            <input type="radio" name="gender">others
        </p>
        <p>hobby>>>:
            <input type="checkbox">篮球
            <input type="checkbox">足球
            <input type="checkbox">双色球
        </p>
        <p>email
            <input type="email">
        </p>
        <p>province
            <select name="" id="">
                <option value="">上海</option>
                <option value="">杭州</option>
                <option value="">合肥</option>
            </select>
        </p>
        <p>gf:
            <select name="" id="" multiple>
                <option value="">f1</option>
                <option value="">f2</option>
                <option value="">f3</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>

        <p>file>>>:
            <input type="file">
        </p>
        <p>files>>>:
            <input type="file" multiple>
        </p>
        <p>
            <input type="submit" value="注册">
            <input type="button" value="按钮">
            <input type="reset" value="重置">
        </p>
    </form>

</body>
</html>