Day2
1、html
超文本标记语言
浏览器从上往下解析html文件
后缀.html后者.html
2、http协议
请求/响应模式
请求报文
请求头、请求行、请求数据
响应头、响应行、响应体
状态码
200、404、401
3、开发流程
1)本地测试
2)部署
4、html语法结构
1)注释
html中 <!--注释内容-->
css中 /*注释内容*/
2)实体
空格  ;
3)块级元素和行内元素
元素的组成
外边距margin + 边框border +内边距padding +内容
块级元素{支撑起整个网页的结构}
div ()
h1~h5标题
margin
html
ul li 无序列表
margin 、 padding left
li 黑色原点 list-style设置
ol li 有序列表
p 段落标签
margin
行内元素{填充网页}
a 超链接
href 访问的地址
url 访问地址
id 锚点
target 设置超链接的打开方式
_self 当前选项卡
_blank 新的选项卡
块级元素转换为行内元素
display:block; 将元素设置为块级元素
display:inline-block; 将元素设置为行内块元素
如何给行内元素设置宽高?
将行内元素设置为块级元素或者行内块元素,再设置宽高即可
4)核心属性[绝大多数标签都可以使用的属性]
<div 属性名=属性值 属性名=属性值></div>
id 唯一标识
class 类名
title 提示语
style 样式
5)特有属性[某些标签才具备的属性]
a
href
target
img
src 加载图片的地址
alt 图片无法加载时显示的文字
6)自定义属性
data-xxx='xxx'
<div data-test='hello'></div>
5、表格
table
属性:border,cellpadding,cellpadding,bgcolor
caption 表格标题
thead 表头
tr
th
tbody 表体
tr
td
合并单元格
colspan 跨列数
rowspan 跨行数
6.h5新增的语义化标签
header,aside,nav,article,section,footer,address
7.表单
form
get和post的区别
get 会将请求的数据拼接再浏览器地址栏上,www:baidu.com?neme=tom&age=13 不安全
请求数据的大小有限制
post 将请求数据放在请求体中,请求数据的大小一般没有限制,比较安全
表单的组件
label
input
type
text 单行文本框
submit 提交表单
radio 单选按钮
checkbox 复选按钮
reset 重置表单
password 密码框
file 文件的上传
图片上传
文件服务器(图片、文件)
image 图片按钮
select
option
textarea
button
表单提交
用户点击新增按钮 --> 弹出模态框(表单)-->输入信息 -->用户点击确认提交按钮
-->将数据发送给后台 -->关闭模态框 -->调用重置按钮,清空表单内容
-->下一次点击显示模态框的时候内容为空
课后作业
个人简历.课程表.
上课代码:
<!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>
<!-- <style>
ul li{
list-style: none;
}
/* 上方设置无黑原点。 */
</style> -->
<!-- <style>
ul li{
list-style: none;
}
</style> -->
<body>
<!-- 这是注释 ctrl+/ -->
<!-- <img src="" alt="图片无法加载">
<script>
console.log(a);
let a = 1;
</script>
<div id="one">hello</div>
<h1 class="one" title='这是标题一的提示'>标题一</h1> -->
<ul style="color: rgb(8, 8, 8);">
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
<div style="height:500px" @click='clickHandler'></div>
<p>
这是一个段落
</p>
<a href="#one" target="_self">百度</a>
<!-- 默认是_self在当前页面打开 _blank新建选项卡 #是id的意思-->
<!-- <script>
new Vue({
methods:{
clickHandler(a){
console.log(a)
}
}
}) -->
</script>
</body>
</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>
<!-- <div style="width: 500px;"></div> -->
<!-- cellspacing是单元格间的距离 cellpadding 内容与单元格的距离 bgcolor可以在th中用-->
<table width='500' border="1" cellspacing='0' cellpadding='5' bgcolor='redS'>
<!-- 表头标题 -->
<caption>这是我的第一个表格</caption>
<!-- 表头 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th colspan="2">操作</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<!--文本水平居中 -->
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>删除</td>
<td>详情</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tfoot> -->
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人计划表</title>
</head>
<body>
<table width='800' border="1" cellspacing='0'>
<caption>工作计划执行表</caption>
<thead>
<!-- tr>th*3 快捷创建-->
<tr>
<th colspan="3">技术方向:大前端 填表:公冶</th>
<!-- <th>2</th>
<th>3</th> -->
<th colspan="2">批准:考核 存档:月份:2020</th>
<!-- <th>5</th> -->
</tr>
</thead>
<tbody align="center">
<tr>
<td colspan="2">日期/时间</td>
<!-- <td>2</td> -->
<td>工作计划</td>
<td>执行情况说明</td>
<td>考核</td>
</tr>
<tr>
<td rowspan="4">07/08/周三</td>
<td rowspan="2">上午</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td rowspan="2">下午</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr><tr>
<td rowspan="4">07/08/周三</td>
<td rowspan="2">上午</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td rowspan="2">下午</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>1</td> -->
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="">
<label for="username">用户名:</label><input type="text" id="username" >
<label for="password">密码:</label><input type="password" id="password">
<br>
性别:
<label for="man">男</label><input type="radio" id="man" name="gender" value="male">
<label for="famale">女</label><input type="radio" id="famale" name="gender" value="female">
<br>
<!-- checked 是默认选项 -->
爱好:
<label for="basketball">篮球</label><input type="checkbox" id="basketball" checked>
<label for="football">足球</label><input type="checkbox" id="football" >
<br>
出生地:
<select >
<optgroup label="省">
<option value="安徽">安徽</option>
<option value="山西">山西</option>
<option value="陕西">陕西</option>
</optgroup>
</select>
<select >
<optgroup label="市">
<option value="安徽">安徽</option>
<option value="山西">山西</option>
<option value="陕西">陕西</option>
</optgroup>
</select>
<br>
<input type="reset" value="重置按钮">
<br>
<textarea cols="30" rows="10"></textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
</head>
<style>
a{
/* 将a标签设置为块级元素 */
display: block;
}
div{
display: inline-block;
}
</style>
<body>
<a href="">登录</a>
<span>测试</span>
<div>zheshi</div>
</body>
</html>