基础的HTML
一、基础知识
01. 基本概念
HTML（Hyper Text Markup Language），超文本标记语言，它不是一种编程语言，而是一种标记语言
02. 基本结构
<!DOCTYPE html>
<!--文档声明：位于文档的首行，告诉浏览器文档使用哪个HTML版本。-->
<html>
<!-- html标签：告诉页面这是一个HTML文档，所有网页内容包含在html标签内 -->
<head>
<!--head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。-->
<!--meta元素可提供有关页面的元信息-->
<!--比如针对搜索引擎和更新频度的描述和关键词等。-->
<meta charset="UTF-8" />
<!--声明文件的编码是UTF-8的编码，告诉浏览器，你用什么编码去解析这个文件-->
<meta name="keywords" content="Java培训、web前端、UI培训" />
<meta name="description" content="源代码教育品牌升级为源码时代" />
<!-- 搜索引擎优化SEO，提供给搜索引擎的关键字信息 -->
<title>这是标题</title>
<!--title : 网页的标题，会显示在标题栏-->
</head>
<body>
<!--这里存放网页主体内容-->
</body>
</html>
03. 注释格式
<!-- 这里书写注释内容 -->
<!-- 注释内容不能嵌套！！！ -->
04. 标签规范
<!-- 单标签 -->
<br>
<hr>
<img>
<!-- 双标签，成对出现 -->
<p>双标签</p>
<h1>双标签</h1>
二、基础标签:
01. 文字和段落标签
-
h标题标签
<h1>一级标题</h1> <!-- 注：一级标题，在一个页面只有一个 --> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> -
p 段落标签
<!-- p标签用于段落描述，每一个段落跟另外的内容间距会很明显，这是因为浏览器会默认设置p标签的内边距和外边距 --> <p>这是第一个段落</p> <p>这是第二个段落</p> -
br 换行标签
<!-- 下面是一个段落中的换行，换行相对于段落而言，间距会小很多 --> <p> 这是一个段落，注意！要换行了<br /> 哎呀，换了~~~~ </p> -
hr 水平线标签
<!-- hr标签主要用于表现分割线 --> <p>这是一个文本区域</p> <hr /> <p>这是分割后的文本区域</p> -
b 加粗标签 和 strong 强调标签
<!-- b标签是单纯的加粗，只有视觉上的意义 --> <b>我是单纯的加粗</b> <br> <!-- strong除了加粗意外，具有强调的实际语义 --> <strong>我除了加粗，还要强调</strong> -
i 斜体标签和 em 斜体强调标签
<!-- i只是单纯的斜体，没有任何语义 --> <i>我只是单纯的斜体，没有语义</i> <br> <!-- em除了斜体以外，还有强调的语义 --> <em>我除了斜体以外，还有强调的语义</em> -
small 小号字标签和big 大号字标签
<!-- small标签，主要用于小号字，没有语义 --> <small>这是小号文字</small> <p>这是正常文字</p> <!-- big标签只有字体修饰功能，没有语义 --> <big>这是大号文字</big> <p>这是正常文字</p> -
del删除标签
-
ins插入标签
-
sub下标标签和sup上标标签
02. 特殊符号
03. 布局标签
04. 超链接标签
-
语法
href——hyper reference（超链接）
<!-- 基本使用 --> <a href="http://www.baidu.com">百度一下，你就知道</a> -
窗口跳转——target
<!-- 当前窗口跳转————【_self】，默认值 --> <a href="http://www.baidu.com" target="_self">百度一下，你就知道</a> <!-- 新窗口跳转————【_blank】 --> <a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a> -
创建锚点——name
**【注意】**用
name创建的锚点只能从一个a标签跳转到另一个a标签<!-- 定义锚点 --> <a name="top">这是顶部</a> <div style="height:3000px;"></div> <!-- 定义跳转链接 --> <a href="#top">点击跳转回到顶部</a> -
创建锚点——id
设置
id名定义锚点，可在不同标签之间跳转<!-- 定义锚点 --> <div id="top">这是顶部</div> <div style="height:3000px;"></div> <!-- 定义跳转链接 --> <a href="#top">点击跳转回到顶部</a>
05. 图像标签
-
语法
<!--src中填入图片的路径、地址，包括绝对路径和相对路径--> <img src="./1.jpg" /> <img src="http://www.aa.images/1.jpg" /> -
属性
属性名 作用 属性值示例 src 图片路径地址 <img src="../images/1.jpg" />height 设置高度，以高度为准等比缩放 <img height="50px" />width 设置宽度，以宽度为准等比缩放 <img width="100px" />alt 加载失败显示的文本 <img alt="图片加载失败了" />title 鼠标悬浮时显示的文字 <img ="这是图片标题" />title
06. 列表标签
-
无序列表
<!--用 ul 表示无序列表--> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> -
有序列表
<!--用 ol 表示有序列表--> <ol> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ol> -
定义列表
<!-- 用 dl 表示定义列表 用 dt 代表定义项 用 dd 代表被定义项，解释定义项 --> <dl> <dt>电脑</dt> <dd>联想</dd> <dd>笔记本电脑</dd> <dd>戴尔</dd> <dd>苹果</dd> <dt>上衣</dt> <dd>T恤</dd> <dd>卫衣</dd> <dd>衬衫</dd> <dd>毛衣</dd> </dl>
07. 表格标签
【注】：表格不用于布局，只用于显示数据
-
基本语法
<table border="1"> <!--用table定义表格，border设置表格边框线宽--> <tr> <!--用tr定义表格的一行--> <td>第一行单元格1</td> <!--用td定义表格的一个单元格，有几个单元格就有几列--> <td>第一行单元格2</td> <td>第一行单元格3</td> </tr> <tr> <td>第二行单元格1</td> <td>第二行单元格2</td> <td>第二行单元格3</td> </tr> </table>
基本属性
-
表格属性
属性名 作用 width 表格宽度 height 表格高度 border 边框大小 borderColor 表格边框颜色 align 对齐方式（left、right、center） -
单元格属性
属性名 作用 width 单元格宽度 height 单元格高度 align 对齐方式（left、right、center）
结构表格
带结构的表格包含表格头部thead、表格主体tbody、表格脚部tfoot
-
基本属性
标签中属性名 作用 <caption> 表格标题，默认居中 <thead> 表头 <th> 表头内部的单元格，默认居中，但还是要包含在 <tbody> 表格主体 <tfoot> 表格脚（尾） -
基本结构
<table border="1"> <caption>这是表格标题</caption> <thead> <tr> <th>第一行单元格1</th> <th>第一行单元格2</th> <th>第一行单元格3</th> </tr> </thead> <tbody> <tr> <td>第二行单元格1</td> <td>第二行单元格2</td> <td>第二行单元格3</td> </tr> </tbody> <tfoot> <tr> <td>表格脚注单元格1</td> <td>表格脚注单元格2</td> <td>表格脚注单元格3</td> </tr> </tfoot> </table>
-
单元格合并
<table border="1"> <tr> <!-- colspan表示这个表格占有两列，所以需要把后面原本那一列删除掉 --> <td colspan="2">第一行单元格1</td> <!-- <td>第一行单元格2消失了</td> --> </tr> <tr> <td>第二行单元格1</td> <td>第二行单元格2</td> </tr> </table><table border="1"> <tr> <!-- 此处rowspan表示当前单元格占有两行单元格的空间，所以需要将第二行的单元格删除掉 --> <td rowspan="2">第一行单元格1</td> <td>第一行单元格2</td> </tr> <tr> <!-- <td>第二行单元格1消失了</td> --> <td>第二行单元格2</td> </tr> </table>
08. 表单标签
-
语法
<form action="" method="get"> 用户名：<input name="username" value="" /><br /> 电话：<input name="phone" value="" /> <input type="submit" /> </form>
-
form表单
-
属性
属性名 值 描述 action URL 规定当提交表单时向何处发送表单数据。 enctype application/x-www-form-urlencoded(默认)
multipart/form-data
text/plain规定在发送表单数据之前如何对其进行编码。
上传文件时必须指定为：multipart/form-datamethod get(默认) | post 规定用于发送 form-data 的 HTTP 方法。 target _self(默认) 当前页面打开
_blank 新窗口打开
_parent 父框架集中打开
_top 在整个窗口打开
framename 在指定框架打开规定在哪个窗口打开 action URL。 -
method 请求方法：
-
GET————显式请求
可以在 浏览器->地址栏 看到请求数据
在地址栏中，从 ？ 往后，都是请求参数
参数之间使用 & 连接
参数格式为： 参数名 = 参数值
-
安全性低，但是很快
-
发送的数据比较少
-
-
POST——— 隐式请求
-
不会显示在 浏览器->地址栏中
-
安全性高，但是速度很慢
-
发送的数据大小没有要求GET请求
-
-
-
-
输入控件——input标签
-
input 的 type 属性：
属性值 input形态 特点 text 文本框 默认形态，收集文本信息 password 密码框 隐藏输入内容 submit 提交按钮 点击后执行提交 button 普通按钮 可结合JS脚本实现自定义功能 reset 重置按钮 回到最初状态（注意不是清空） radio 单选 一组数据，只选择一项
（name必须设置一样的名字，且提供value值）checkbox 多选 一组数组，可以选择多项
（name必须设置一样的名字，且提供value值）file 文件上传 可以选择文件以提交 hidden 隐藏域 不会展示到页面中，但会提交 image 图像域 -
input的其它属性
属性值 描述 name 定义input收集到的数据名称
只能使用数字、字母、下划线命名，且不能以数字开头value 用于存放收集到的数据
文本框和密码框的 value 可以不用写，设置了即默认值
其它无法由用户输入的 input ，需要在标签中设置 value 值disabled 定义标签不可用 checked 适用于radio、checkbox，用于设置默认选中项 maxlength 规定用户输入的最大字符长度 size 规定文本框的宽度 placeholder 设置输入框的输入提示 autocomplete 基于之前输入的值，提示写过的内容，自动输入
-
-
下拉框——select
-
语法
<select name="下拉框名称"> <option value="1" selected="selected">下拉框1</option> <option value="2">下拉框2</option> <option value="3">下拉框3</option> </select>
-
-
文本域——textarea
-
cols——定义文本域的宽度（多少列）；
-
rows——定义文本域的高度（多少行）；
-
disabled——禁用文本域；
-
-
修饰文本——label
-
为input元素定义标注
-
可用于修饰 radio 和 checkbox ，优化 单选 和 复选 的**交互体验
<label><input type="radio" name="sex" value="male">男</label> -
label的for属性值要与input元素的id属性值一致，这样点击label标签的文字也可选中对应的input元素
<label for="username">用户名</label> <input type="text" id="username">
-
09. 按钮标签
-
语法
<button>普通按钮</button>button 标签里，所有东西都是按钮，可以放入文本、图形等元素
-
注意
button 在 form 标签内，可以提交表单
但这是陷阱，浏览器会默认其类型为 submit;
因此要避免 button 提交，需要主动设置 button 的 type=“button”;
三、H5新增标签
01. 布局标签
| 标签 | 描述意义 |
|---|---|
| <header> | 头部标签，定义了文档的头部区域 |
| <nav> | 导航栏标签，定义了导航链接 |
| <main> | 定义页面主要内容,它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。 |
| <section> | 定义某个区域，定义文档中的节（section、片段、板块）。 |
| <article> | 内容标签，定义页面独立的内容区域。 |
| <aside> | 侧边栏标签，定义页面的侧边栏内容。 |
| <footer> | 底部标签，定义 section 或 document 的页脚。 |
目前刚开始学习，只记下了学习过的、已经掌握的内容，未完待续~~
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
