前端Summary——HTML学习
- 基础内容
- 基础总结
Html基本结构
- html的基本标签
- head标签
| <head>内部标签 |
说明 |
| <title> |
定义网页的标题 |
| <meta> |
定义网页的基本信息（供搜索引擎） |
| <style> |
定义CSS样式 |
| <link> |
链接外部CSS文件或脚本文件 |
| <script> |
定义脚本语言 |
| <base> |
定义页面所有链接的基础定位（用得很少） |
- 段落与文字
（一）、段落标签
（1）段落与文字标签
| 标签 |
语义 |
说明 |
| <h1>~<h6> |
header |
标题 |
| <p> |
paragraph |
段落 |
| <br> |
break |
换行 |
| <hr> |
horizontal rule |
水平线 |
| <div> |
division |
分割（块元素） |
| <span> |
span |
区域（行内元素） |
- 文本格式化标签
| 标签 |
语义 |
说明 |
| <strong> |
strong（加强） |
加粗 |
| <em> |
emphasized（强调） |
斜体 |
| <cite> |
cite（引用） |
斜体 |
| <sup> |
superscripted（上标） |
上标 |
| <sub> |
subscripted（下标） |
下标 |
- HTML
4.HTML样式、链接和表格
（一）HTML样式
（1）三种样式表插入方法
说明：rel="stylesheet":外部样式表
type="text/css":引入文档的类型
外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：
<style type="text/css">
body {background-color:red}
p {margin-left: 20px}
</style>
内联样式表：
<p style:”color=brown”></p>
(二)html链接
（1）链接数据：文本链接、图片链接
<a href="http://www.baidu.com">nihao</a>
<a href="http://www.baidu.com">
<img src="mypic.jpg" width="100" height="100">
</a>
（2）属性：
href属性:指向另一个文档的链接
name属性：创建文档内的链接
文档内跳转：
<a name="tips">hello</a>
<br>
<a href="#tips">跳转到hello</a>
（三）html表格
（·1）表格标签
<table border="1">：显示表格边框
| 标签 |
语义 |
说明 |
| table |
table（表格） |
表格 |
| tr |
table row（表格行） |
行 |
| td |
table data cell（表格单元格） |
单元格 |
| thead |
table head |
表头 |
| tbody |
table body |
表身 |
| tfoot |
table foot |
表脚 |
| th |
table header |
表头单元格 |
（2）表格基本结构
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
- 表格完整结构
- 合并行和合并列
- 合并行: <td rowspan="跨度的行数">
- 合并列：<td colspan="跨度的列数">
5.html列表、块和布局
（一）列表
(1)有序列表
<ol type="列表项符号">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
列表项符号：A、a、l、i、start、
（2）无序列表
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
| type属性值 |
列表项的序号类型 |
| disc |
默认值，实心圆“●” |
| circle |
空心圆“○” |
| square |
实心正方形“■” |
（二）块
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
（三）布局
（1）div布局：
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
background-color: brown;
}
div#head{
width: 100%;
height: 10%;
background-color:red;
}
div#content_menu{
width: 30%;
height: 80%;
background-color:darkblue;
float: left; <!-- 从左到右-->
}
div#content_body{
width: 70%;
height: 80%;
background-color:green;
float: left;
}
div#foot{
width: 100%;
height: 10%;
background-color: blueviolet;
clear: both;
}
</style>
<div id="container">
<div id="head">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="foot">底部</div>
</div>
（2）table布局
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: red">head</td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: blue">左菜单</td>
<td width="60%" height="80%" style="background-color: brown">中菜单</td>
<td width="20%" height="80%" style="background-color: gold">右菜单</td>
</tr>
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: green">底部</td>
</tr>
</table>
6.html表单和表单与php交互
（一）表单的创建
需要用<form></form>包裹住<input>
（1）复选框
你喜欢的水果有？
<br/>
苹果<input type="checkbox">
香蕉<input type="checkbox">
西红柿<input type="checkbox">
（2）单选按钮
你的性别：
男<input type="radio" name="sex">
女<input type="radio" name="sex">
（3）下拉列表
请选择你的公司
<select>
<option>baidu</option>
<option>ali</option>
<option>bytedance</option>
<option>tencent</option>
</select>
（4）文本域
<textarea cols="30" rows="30">请输入内容</textarea>
- 创建按钮
<input type="button" value="按钮">
<input type="submit" value="提交">
（二）与php交互
<form action="服务器url" method="get">
用户名：<input type="text" name="name">
密码：<input type="password" name="password">
<br/>
<input type="submit" value="提交">
</form>
解释
- action指定具体要提交到哪个服务器的地址，method代表提交方式有get和post，
- 提交按钮按下就会向服务器提交表单。
7.html背景和实体
（一）背景
（1）背景图片
<body background="human.jpg">
</body>
（2）背景颜色
<body bgcolor="#a52a2a" ">
</body>