HTML基础入门

学习推荐地址w3school

一、HTML页面结构

1、前端

前端开始中最基本的也是最必须的三个技能，前端的开发中，在页面的布局时：

HTML：页面结构，可以把他看成一个文档，定于展示页面的内容结构
CSS：页面表现，元素的大小、颜色、位置、隐藏或显示、部分动画效果
JavaScript：页面行为，部分动画效果，页面与用户的交互，页面功能

2、HTML历史

HTML：超文本标记语言，是网页制作必备的编程语言，超文本就是指页面可以包含图片，连接，甚至音乐，程序等非文字元素

HTML2.0：是1996年由internet工程工作小组的HTML工作小组开发的
HTML3.2：作为W3C标准发布于1997年1月14日，HTML3.2向HTML2.0标准添加了被广泛运用的特性，如：字体、表格、appies、围绕图像的文本流、上标和下标
HTML4.0：被发布1997年12月18日，而仅仅进行了一些编辑修正的第二版本发布于1998年4月24日。HTML4.0最重要的特性是引入了样式表(CSS)
HTML4.01：发布于1999年12月24日（微小改进）
XHTML1.0：发布于2000年1月20日，使用XML对HTML4.01进行了重新的表示
HTML5：，W3C于2014年1月22日发布工作草案

3、HTML的页面结构

超文本编辑语言的结构包括：头部(head)、和主体(boby)，其中头部提供关于网页的信息，主体提供网页的具体结构

<!DOCTYPE html>
<html lang="en">
<head>
    <!--头部信息，不会在页面显示-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--主体部分 页面中显示内容-->
    <h1>第一个网页页面</h1>
</body>
</html>

1. 文档声明

HTML5:

2. 页面头部

第二行和最后一行组成的html标签对，定义html文档的整体
head和boby标签对是它的第一次子元素
head标签对：标签里负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和js文件，设置的内容不会显示在网页上，标题的内容会显示在标题栏

3. 页面内容

body标签对：元素定义文档的主体，就是页面显示的内容
body元素包含文档的所有内容（文本、超链接、图像、列表、表格等）

二、常见的HTML标签

1、注释：

注释标签用于源代码中插入注释、注释不会显示在游览器中
代码中合理使用注释有助于以后的时间对代码编辑

2、标题标签：

<h1>-<h6>标签对定义
- h1 定义最大的标题
- h6 定义最小的标题
由于h元素拥有确切的语义，因此请慎重的选择恰当的标签层级来构建文档结构，因此请不要用比标题标签来改变同一行的字体大小

<!--标题标签-->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

3、段落和换行标签

<p></p>: p标签定义段落，元素会自动在其前后创建一些空白，游览器会自动添加这些空间，也可以在样式中规定
-   ：段落中空格可以加入这个来增加段落的空格，一般不推荐使用，在样式控制格式
<hr> : hr标签在HTML页面中创建一条水平线，水平分割线可以在视觉上将文档分割成各个部分
<br> :换行标签

<hr>
<p>这个是段落标签 &nbsp;&nbsp;段落<br>标签</p>
<hr>

4、块标签

<div></div>: div标签块元素，表示一块内容，没有具体的语义，可以把页面内容分成一个个结构块
<span></span>： 行内元素，表示一行中的一小段内容，没有具体的语义，如果行内部分内容需要渲染时，可以用sapn标签分成一小块一小块的去渲染

<div >块标签，没有具体语义，</div>
<div>将结构分成一块一块的</div>
<p>这里是正常颜色<span style="color:red" >python是红色</span>
<span>java</span></p>

5、含样式和语义的行内标签

标签	含义
<i></i>	行内元素，字体为斜体
<em></em>	行内元素，语义为强调内容，表示重要，效果斜体
<b></b>	行内元素，字体加粗
<strong></strong>	行内元素，语义强调，表示非常重要，效果字体加粗

<i>字体是斜体</i><br>
<em>语义为强调，表示重要，效果斜体</em><br>
<b>粗体字</b>
<strong>语义强调，表示非常重要，效果字体加粗</strong>

6、图像标签和链接标签

图片标签：<img src=" alt="">:

img元素是向网页中嵌入一个图像
请注意，从技术上讲，img标签并不会在网页中插入图像，img变迁创建的是被引用图像的占位空间
属性
- src：图片地址
- alt：规定在图像无法显示时的替代文本

链接标签：<a href=""></a>

定义超链接，用于从一张页面链接到另一张页面
属性
- href ：连连接的地址
- a标签中间的文本为连接说明和点击跳转的入口

样式链接：<link rel="stylesheet" type="text/css" href="theme.css">：

表示连接到一个外部样式，用在头部中
属性
- rel ：规定当前文档与被链接文档之间的关系。
- type ：规定被链接文档的 MIME 类型。
- href ：规定被链接文档的位置。

<img src="img/bd_logo1.png" alt="百度首页" width="200" height="100">
<img src="img/bd_logo12222.png" alt="百度首页"><br>
<a href="http://www.baidu.com">百度一下</a>

<head>
    <link rel="stylesheet" type="text/css" href="">
</head>

7、列表

有序列表: <ol></ol>

<li></li> :表示列表的一列数据
li标签文字部分表示列表的内容
有序表示列表有顺序1，2，3，4，5

<ol>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
</ol>

无序列表：<ul></ul>

<li></li> :表示列表的一列数据
li标签文字部分表示列表的内容
无需表示，列表没有顺序，小黑点表示

<ul>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
</ul>

8、表格

表格标签：<table border="1"></table>

简单的html表格由table元素以及一个或者多个tr、th、td标签组成
- <th></th>:表示表格的表头
- <tr></tr>:表示表格的行
- <td></td>:表示表格的列

<!--border="1" 表示表格的线条粗细-->
<table border="5">
    <!--定义一行表头-->
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    </tr>
    <!--定义两行-->
    <tr>
        <!--定义列和定义单元格内容-->
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>

    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
</table>

三、HTML表单

1、表单标签：form

<form action="url" method="get/post"></form>

action="url" ：规定当提交表单时向何处发送表单数据，接口地址。
method="get/post"：规定用于发送表单数据的 HTTP 方法。
form表单中包含的元素标签

元素标签	作用
<label></label>	中间写入文本，为表单元素定义文字标注
<input>	定义通用的表单元素
<textarea></textarea>	定义多行文本输入框
<slect></select>	定义下拉表单元素
<option></option>	定于下拉表单中的元素选项，配合select标签使用

2、input标签的属性

value属性： 定义表单元素的值,表单提交的value值，和name属性的key对应
name属性： 定于表单元素的名称，此名称是提交数据时的键命(接口请求参数的名称)
placeholder属性: 帮助用户填写输入字段的提示

<!--name、value、placeholder属性示例-->
<form action="" method="get">
    <!--帐号密码输入框-->
    <label for="username">帐号：</label>
    <input type="text" name="username" id="username" placeholder="请输入帐号"><br>
    <label for="pwd">密码：</label>
    <input type="password" id="pwd" name="pwd" placeholder="请输入密码"><br>
    <label>性别：</label>
    <input type="radio" name="gender" value="男"> 男
    <input type="radio" name="gender" value="女">女
    <br>
    <input type="submit" value="登陆">
    
</form>

type属性

值	作用
text	定义单行文本输入框
password	定义密码输入框
radio	定义单选框
checkbox	定义复选框
file	定义上传文件
submit	定义提交按钮
button	定义一个普通按钮
reset	定义重置按钮
image	定义图片作为提交按钮，用src属性定义图片地址
hidden	定义一个因此的表单域，用来存储值

3、label标签

为表单元素定义标注
label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性，如果您在label元素内点击本，就会触发此控件，就是说当用户通过点击label标签时，游览器会自动化将焦点转到和标签相关的表单控件上
label标签的for属性和哪个表单的id相同，就表示和哪个表单关联

4、textarea标签

textarea标签定义多行的文本输入控件
本文本区中容纳无线数据的文本，其中的文本的默认字体是等宽字体(通常是Courier)
可以通过cols和rows实行来规定textarea的尺寸，更好的办法是使用CSS的height和width属性来控制

<!--多行输入框-->
<label for="text">文本说明</label>
<textarea name="text" id="text" cols="10" rows="2" placeholder="输入需要说明的文本">
</textarea><br>

textarea的属性

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
cols	number	规定文本区内的可见宽度。
disabled	disabled	规定禁用该文本区。
form	form_id	规定文本区域所属的一个或多个表单。
maxlength	number	规定文本区域的最大字符数。
name	name_of_textarea	规定文本区的名称。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
rows	number	规定文本区内的可见行数。
wrap	hard soft	规定当在表单中提交时，文本区域中的文本如何换行。

5、select标签

slelct元素可以撞见单选或者多选下拉菜单，也可以用于选择数据提交表单
select标签中的option标签用于定义列表中的可用选项

<!--下拉框-->
<select name="fruit">
    <option value="苹果" >苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
</select>

6、select标签

option元素定义一个下拉框中的一个选项
游览器将option标签中的内容作为select标签的菜单或者是滚动列表中的一个元素显示
option标签位于select标签内部

四、内联框架

1、iframe

iframe元素会创建包含另外一个文档的内联框架

例子：将百度页面链接到当前页面

<!--内联框架-->
<iframe src="http://www.baidu.com"  height="1000" width="2000"></iframe>

五、HTML元素分类

元素就是标签，布局中常见的又三种标签

块标签
内联标签
内联块标签

1、块标签

块标签也可以成为行标签，布局中常用的标签如：div、p、ul、li、h1-h6、dl、dt、dd等都是块标签，它在布局的行为：

支持全部的样式
如果没有设置宽度，默认的宽度是父级宽度的100%
盒子占据一行，几十设置了宽度

2、内联标签

内联标签，也可以成为行内标签，布局中常用的标签如：a、apan、em、b、strong、i等内联标签，他们布局中的行为

支持部分样式(不支持宽、高、margin上下、padding上下)
宽高由内容决定
盒子并在一行
代码换行、盒子之间产生间距
子元素是内联元素，父元素可以用text-align设置子元素水平对齐方式

3、内联块标签

内联块标签，也叫行内块标签，是新增的元素类型、现有的元素没有归于此类别的，lmg个input标签的行为类似这种元素，但是也归于内联标签，我们可以通过用display属性将块标签或者内联标签转化成这种标签，他们在布局中的行为：

支持全局样式
盒子并在一行
代码换行，盒子产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

display属性是永凯色织元素的类型及隐藏的

none 元素隐藏不占用位置
block 元素以块元素显示
inline 元素以内联元素显示
inline-block 元素以内联块元素显示

总结

这种元素，可以通过display属性随便转换
在实际开发中块元素用的较多，所以我们经常把内联元素转成块元素，少量的转换成内联块，
而使用内联元素时，直接使用内联元素，而不用块元素转换