day1_html
1.html介绍
html写页面用的 页面中出现什么
超文本标记语言 除了文本 还有 连接 图片 声音 视频等内容 通过标签语法编写各种元素
2.html基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>testpage</title>
</head>
<body>
我做了一个毕业设计<input type="text" id="name" name="name" required minlength="4" maxlength="5" size="10" />
</body>
</html>
html —head body
class和id在任何标签上都能加，用于标识和区分元素，他们是通配的。
3.浏览器分类
浏览器按内核分类
html css javascript解析器
浏览器
按内核区分
html css javascript
google内核 chrome edge
Chromium
Chrome++
firefox 内核
苹果浏览器
浏览器兼容性问题 UI库中会处理
4.html语法
html使用标签显示数据
标签语法结构
双标签 有开始和结束 用来嵌套其他标签和内容 多于格式有关 <xxx></xxx>
单标签 （自结束标签） 经常有特殊的独立功能 <xxx/>
标签属性 每个标签有自己的属性 通过属性 给标签做设置
5.html编写特点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
html不根据文本排版格式做排版 <br/>
1.编码时 注意格式与显示格式保持统一
2.空格 tab键 只识别为一个空格
3.写代码时 不要与html标签格式产生冲突
4.html会尽力解析标签 如果解析不出 没有显示效果
转义符格式
&xxxxx;
空格转义符 小空格
  中空格
  大空格
< 小于
> 大于
" 引号
© 公司符号
& &符号
注意转义字符的分号
-->
春眠不觉晓<br/>
处处蚊子咬<br/>
蜀道难 难于学java abilm   <br/>
a<b c>d " © &
</body>
</html>
6.排版标签
排版标签
html元素 占满一行 从上到下排列 块元素 block
从左到右排列 内联元素、行内 inline
p段落标签 带行间距
h1-h6 标题标签 占满一行 行间距 加粗 改字号 也带行间距
div 块标签 占满一行 不带行间距
b 加粗 inline
strong 加粗 inline
u 下划线 inline
em 斜体 inline
font color="red" 字体 颜色
span 行内标签 定位文字时使用
ol 有序列表
ul 无序列表
li 列表项
dl 自定义列表
dt 自定义标题
dd 自定义内容
每个标签关注两个点
1.怎么写 单标签、双标签
2.怎么显示 块 、行内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 排版标签
html元素 占满一行 从上到下排列 块元素 block
从左到右排列 内联元素、行内 inline
p段落标签 带行间距
h1-h6 标题标签 占满一行 行间距 加粗 改字号
div 块标签 占满一行
b 加粗 inline
strong 加粗 inline
u 下划线 inline
em 斜体 inline
font color="red" 字体 颜色
span 行内标签 定位文字时使用
ol 有序列表
ul 无序列表
li 列表项
dl 自定义列表
dt 自定义标题
dd 自定义内容
每个标签关注两个点
1.怎么写 单标签、双标签
2.怎么显示 块 、行内
-->
<h6>长生诀---看妞老头</h6>
<p>要想健康又长寿</p>
<p>抽烟喝酒吃肥肉</p>
<p>晚睡晚起不锻炼</p>
<p>常与异性叫朋友</p>
<div>常与异性叫朋友</div>
<div>常与异性叫朋友</div>
<div>常<span>与异性叫</span>朋友</div>
<div>常
<font color="red">
与
<b>异性</b>
<strong>交</strong>
<em>朋友</em>
</font>
</div>
<!-- 有序列表标签 -->
<ol type="I">
<li>英媒：越来越多美国人抛弃智能手机</li>
<li>女子买家秀因显肚子被商家要求删除</li>
<li>俄罗斯人挤爆三亚热</li>
<li>成都九旬老人遭儿女遗弃？假的</li>
</ol>
<!-- 无序列表标签 -->
<ul type="square">
<li>英媒：越来越多美国人抛弃智能手机</li>
<li>女子买家秀因显肚子被商家要求删除</li>
<li>俄罗斯人挤爆三亚热</li>
<li>成都九旬老人遭儿女遗弃？假的</li>
</ul>
<!-- 自定义列表标签 -->
<dl>
<dt>我要吃饭</dt>
<dd>黄焖鸡</dd>
<dd>黄焖鸭</dd>
<dd>黄焖猪</dd>
</dl>
</body>
</html>
7a标签 超链接
两种作用
1 网页跳转
href 跳转的地址 可以使用三种路径
target 跳转方式 _self当前页面打开 _blank新页面打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="/day1_html2/1html介绍.html">跳转到页面1</a> 这里是相对根路径
<!-- %E8%94%A1%E5%BE%90%E5%9D%A4 url编码 -->
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=68018901_16_pg&wd=%E8%94%A1%E5%BE%90%E5%9D%A4&fenlei=256&oq=%25E4%25B8%25AD%25E5%259B%25BD%25E6%25B5%25B7%25E5%2585%25B3&rsv_pq=87bfc7350044ee2b&rsv_t=ba21EgqJqDfjv6pJjWmP%2FRCFndVXUBy%2B7Kphq%2F2XLq0uC6neCXq7d3qwLTtBcvv5LgxbHMc&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&rsv_sug3=49&rsv_sug1=21&rsv_sug7=101&rsv_sug2=0&inputT=10354&rsv_sug4=10354">看我的爱豆</a>
这里是绝对路径
好像用绝对路径不能访问本机的html文件
</body>
</html>
2锚点 当前网页位置跳转
href
# 跳转到顶部
### 占位使用
#id值 跳到指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="/day1_html2/1html介绍.html" target="_blank">跳转到页面1</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 id="aim1">今日推荐</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 id="aim2">更多新闻</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#aim2">跳到顶部</a>
</body>
</html>
用于定义超链接，从一个页面跳转到另一个页面
URL链接格式
http路径
使用hbuilder内嵌服务器运行页面
可以通过http协议访问
http:// 127.0.0.1 : 8848 /day1_html2/xxx.html ? key=value&key=value
协议 ip地址 端口号 资源地址 资源目录 资源文件 参数
hbuilder内嵌服务器
保护本地文件
只能访问到web服务器开放的目录
三种路径格式
1.相对路径 ../ 退出一级 ./当前目录 起点到终点经过的路径
2.相对根路径 从根开始 查找文件路径 指定终点文件的路径
在当前服务器中跳转
3.绝对路径 跳转到外部网站 要带上协议 才可以识别为绝对路径
域名地址关系
http与https区别
网站为了方便记忆 会使用域名 域名dns解析 与地址对应
http 默认不带传输加密
https 可以配置证书 传输数据时加密
http://www.customs.gov.cn/ 80
https://www.baidu.com/ 443
网站会设置为默认端口号 方便用户访问
8图片标签
img标签 用来显示图片
src属性 引入图片的地址
src 图片引入的路径 三种路径
常见图片 jpg png gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 常见图片 jpg png gif
src 图片引入的路径 三种路径
-->
<a href="http://www.baidu.com">aaaaa</a>1111111
<img width="100px" title="tupian" alt="这时图片" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>
a标签 套图片标签 可以让a标签更漂亮 固定组合
<a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</a>
9表格标签
表格标签 绘制二维表使用
table 表格 border="1" 表格粗细
caption 表名
tr 行
td 单元格 rowspan="2" 跨行 colspan="3" 跨列 align="center" 对齐方式
th 列头
thead 表头部区域
tbody 表主体区域
tfoot 表底部区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<caption>员工信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>尼古拉斯·赵四</td>
<td rowspan="2">大忽悠</td>
</tr>
<tr>
<td>2</td>
<td>弗朗斯希·刘能</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">联系电话：110</td>
</tr>
</tfoot>
</table>
</body>
</html>
10表单标签
收集用户数据 提交到服务器使用
收集用户的信息 把传给服务端
1.form标签 表单标签
2.form设置参数 action 提交的地址
method="get"
enctype="application/x-www-form-urlencoded"
3.使用表单元素 收集用户信息 输入框 选择框 下拉列表。。。。
需要标记name属性 作为传递的key
4.提交按钮 <input type="submit"/> 触发提交
action 设置提交的地址
method 设置提交方式 默认get
enctype 提交数据的格式
enctype="application/x-www-form-urlencoded" 编码格式 url编码 使用字符传输
enctype="multipart/form-data" 传字节数据 上传文件使用
get/post的区别
method 发送方式
get 参数会出现在url中
参数可以存为书签
参数会保留在历史记录中
只允许ascii字符 url编码自动转码
长度有限制 4k
get处理快
post 参数不出现在url中 夹在请求报文中传递
参数不可以存为书签
参数会保留在历史记录中
可以发送多种格式 还可以发送字节
长度无限制
post处理稍慢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form标签
method="get" 提交方式
enctype="application/x-www-form-urlencoded" 编码格式 url编码 使用字符传输
enctype="multipart/form-data" 传字节数据 上传文件使用
收集用户的信息 把传给服务端
1.form标签 表单标签
2.form设置参数 action 提交的地址
method="get"
enctype="application/x-www-form-urlencoded"
3.使用表单元素 收集用户信息 输入框 选择框 下拉列表。。。。
需要标记name属性 作为传递的key
4.提交按钮 <input type="submit"/> 触发提交
method 发送方式
get 参数会出现在url中
参数可以存为书签
参数会保留在历史记录中
只允许ascii字符 url编码自动转码
长度有限制 4k
get处理快
post 参数不出现在url中 夹在请求报文中传递
参数不可以存为书签
参数会保留在历史记录中
可以发送多种格式 还可以发送字节
长度无限制
post处理稍慢
请求数据（请求报文）
请求行
请求头
请求体
get方式 参数会出现在url中 请求体没有数据
post方式 参数不出现在url中 传输数据在请求体中
-->
<form action="/myserver" method="get">
<input type="text" name="username"/><br />
<input type="submit"/>
</form>
</body>
</html>
11表单元素
## input 表单输入元素
type="text" 文本框
maxlength="6" 最大长度
placeholder="username" 输入提示
readonly 只读
disabled 禁用
type="password" 密码框
maxlength="6" 最大长度
placeholder="username" 输入提示
readonly 只读
disabled 禁用
type="radio" 单选
name="gender" 分组
value="1" 选项值
type="checkbox" 多选
name="gender" 分组
value="1" 选项值
type="file" 选文件 做文件上传
下拉列表
北京
上海
深圳
</select>
多行文本
<textarea rows="10" cols="60"></textarea>
按钮
提交按钮
重置按钮
自定义按钮
：文本框按钮
密码按钮
<button type="submit">btn提交</button> 提交按钮
<button type="reset">btn重置</button> 重置按钮
<button type="button">btn自定义按钮</button> 自定义按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<form action="/myserver">
<tr>
<td align="right"> //文档中的一部分向右对齐
<label for="username">用户名：</label> 这里的label的意思是用户点击用户名，光标就会跳转到对应的输入框中，因为它和输入框id中的内容一样
</td>
<td><input id="username" type="text" name="username" name是为了与后端发送数据 value="1111" 设置默认值maxlength="6"设置最大输入的字数 placeholder="username" /></td>
</tr>
<tr>
<td align="right">手机号：</td>
<td><input type="text" name="phone" maxlength="11" placeholder="phone" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password" maxlength="8" placeholder="password" /></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input id="gend1" type="radio" name="gender" value="1" /><label for="gend1">男</label>
<input type="radio" name="gender" value="2" checked/>女 当两个设置问为name="gender" 后就不能同时选择，相当于将他们两个绑定在一起
添加checked后就说明刚开始女选项默认是被选中的
对于 "button"、"reset" 和 "submit" - 它定义按钮上显示的的文本
对于 "text"、"password" 和 "hidden" - 它定义输入字段的初始（默认）值
对于 "checkbox"、"radio" 和 "image" - 它定义与输入相关联的值（这也是提交时发送的值）
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input id="gend1" type="checkbox" name="hobby" value="1" checked /><label for="gend1">抽烟</label>
<input type="checkbox" name="hobby" value="2"/>喝酒
<input type="checkbox" name="hobby" value="3" checked/>烫头
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file"/>
</td>
</tr>
<tr>
<td align="right">其他：</td>
<td>
<input type="color"/>
</td>
</tr>
<tr>
<td align="right">出生地址：</td>
<td>
<select name="area" >
<option value="001">北京</option>
<option value="002">上海</option>
<option value="003" selected>深圳</option>
</select>
</td>
</tr>
<tr>
<td align="right">备注：</td>
<td>
<textarea rows="10" cols="60"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit"/>
<input type="reset"/>
<input type="button" value="我的按钮"/></td>
</tr>
<tr>
<td></td>
<td><button type="submit">btn提交</button>
<button type="reset">btn重置</button>
<button type="button">btn自定义按钮</button></td>
</tr>
</form>
</table>
</body>
</html>
学习前端的目的
web应用中的显示部分
后端提供的数据
传递图片的三种路径
输入框中 placeholder=“输入框占位符用于提示”
radio圆形选择框中 checked表示默认选中 两个radio属性中必须添加 name=" " 否则会两个都被选中
注册 submit当点击按钮后就会提交表单，页面不显示
重置 reset当当点击后页面会回复到初始的状态
input[type=‘submit’]{background-color: red} 对于type是submit的键进行设置
是一个块，
是一个段落，p标签会在文字上下增加间距，
本身没有什么效果，只是用于包裹其它内容，划分不同区块
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
