Web前端学习day1
- 一、html的基本介绍
- html基本框架
- 二、html元素
- 1.标题标签
- 2.水平线标签
- 3.段落标签
- 4.强制换行标签
- 5.文本格式化标签
- 6.超链接标签
- 7.图片标签
- 8.列表标签
- 9.盒子标签
- 10.表格元素
- 11.表单标签
- 12.框架标签
- 13.行块级元素
一、html的基本介绍
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
浏览器默认渲染模式： 从左到右 上到下
html文档后缀.html或.htm两种后缀名没有区别，都可以使用。
html基本框架
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>注释：
!DOCTYPE html 网页类型的声明
<head lang="en"> lange='en' 网页的语言类型 en ch
<meta charset="UTF-8"> 浏览器的编码格式
<title>网页的标题</title> 网页的标题标签位置
</head>
<body> 网页的内容区域
网页的内容
</body>二、html元素
1.标题标签
代码如下（示例）：
<h1>这里是标题</h1>
<h2>这里是标题</h2>
<h3>这里是标题</h3>
<h4>这里是标题</h4>
<h5>这里是标题</h5>
<h6>这里是标题</h6>效果：
这里是标题
这里是标题
这里是标题
这里是标题
这里是标题
这里是标题
2.水平线标签
代码如下（示例）：
<hr/>效果：
3.段落标签
代码如下（示例）：
<p>这里是段落标签</p>
<p>这里也是段落标签</p>效果：
这里是段落标签
这里也是段落标签
4.强制换行标签
代码如下（示例）：
<br>作用：强制换行
5.文本格式化标签
代码如下（示例）：
<b>加粗</b>
<strong>加重</strong>
<i>斜体</i>
<em>斜体</em>
<small>小号字体</small>
<del>添加删除线</del>
<ins>添加下滑线</ins>
文本<sup>上标签</sup>
文本<sub>下标签</sub>效果：
加粗
加重
斜体
斜体
小号字体添加删除线
添加下滑线
文本上标签
文本下标签
6.超链接标签
代码如下（示例）：
当前页面跳转
<a href="https://www.baidu.com/" target="_self" >访问百度</a>
打开新页面跳转
<a href="https://www.baidu.com/" target="_blank" >访问百度</a>属性：
1.href="" 跳转链接的URL地址
2.target="" 跳转方式 _self当前页面跳转_blank打开新页面跳转
7.图片标签
代码如下（示例）：
<img src="" alt="">属性：
1.src="" 图像的 URL 地址
2.alt="" 为图像定义一串预备的可替换的文本
8.列表标签
ol li 有序列表
代码如下（示例）：
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>效果：
- 北京
- 上海
- 广州
ul li 无序列表
代码如下（示例）：
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>效果：
- 北京
- 上海
- 广州
** 无序列表**
<dl>
<dt>北京
<dd>烤鸭</dd>
</dt>
<dt>上海</dt>
<dt>广州</dt>
</dl>效果：
烤鸭
9.盒子标签
代码如下（示例）：
<div>div块级元素内容</div>
<span>span行级元素内容</span>效果：
div是块级元素内容
span行级元素内容
10.表格元素
代码如下（示例）：
<table border="1" cellspacing="0">
<caption>
学生信息管理
</caption>
<tr>
<th rowspan="4">10086班</th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>1</td>
<td>李四</td>
<td>17</td>
<td>西安市</td>
</tr>
<tr >
<td>2</td>
<td>王五</td>
<td>16</td>
<td>西安市</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>18</td>
<td>西安市</td>
</tr>
<tr>
<th colspan="5">备注：简单统计学生信息</th>
</tr>
</table>效果：
学生信息管理
10086班 | 序号 | 姓名 | 年龄 | 地址 |
1 | 李四 | 17 | 西安市 | |
2 | 王五 | 16 | 西安市 | |
3 | 张三 | 18 | 西安市 | |
备注：简单统计学生信息 |
属性：
1.border 给表格添加边框
2.cellspacing 设置表格和单元格之间的距离的
3.cellpadding 设置单元格的内间距的
4.width 设置table的宽
5.align 设置表格的对齐方式
6.跨行(rowspan) 跨列(colspan) 在计算时包含自身
7.background-color设置表格颜色
11.表单标签
代码如下（示例）：
<form action="" method="">
文本框
<input type="text">
密码框
<input type="password">
单选框
<input type="radio">
多选框
<input type="checkbox">
提交按钮
<input type="submit">
普通按钮
<input type="button">
重置按钮
<input type="reset">
资源管理
<input type="flie" accept=".mp3,.mp4,.wmv" 类型限制 multiple 支持多选>
下拉表单
<select>
<option>--请选择--</option>
<option value="西安市">--西安市--</option>
<option value="宝鸡市">--宝鸡市--</option>
</select>
文本域
<textarea></textarea>
</form>form属性：
1.action="" 写的是当前表单提交的服务器路径
2.method=""表单提交的方式
get :显示提交 值拼接在路径的后边 不安全 数据量较大 类似在location地址栏 输入地址
post: 隐式提交 安全的 提交的数据量比较小
input属性：
1.type="" input类型
2.placeholder=“请输入…” 智能提示
12.框架标签
代码如下（示例）：
<a href="./pages/one.html" target="targetPage">one页面</a>
<a href="./pages/two.html" target="targetPage">two页面</a>
<a href="./pages/three.html" target="targetPage">three页面</a>
<iframe name="targetPage" src="./pages/one.html"></iframe>作用：
当前网页内部内嵌其他网页，主要做小型的企业系统
13.行块级元素
常见行级元素： p，div，ul，ol，dl，table，h1，form
常见块元素： a，span，img，input，select，strong，label，b
