目录
环境：Visual Studio Code 或 HBuilderX.1.7.0.20190314
我是以 HBuilderX实战
1.在电脑上创建好，要存储文件的路径文件夹，我是在电脑桌面(C盘)上创建的
2. 直接将该文件夹拖入
ctrl+鼠标滚轮 可以调节字体大小，可以调整环境至合适大小
1.简单认识html
1.html全称——hyperText markup language
历史：
html4 标记的使用
html5 新增标记
xhtml(可扩展标记语言)
1.什么是html
html是超文本标记语言
超文本：图片 、音视频。。。
标记：代码段（标签）
2.文件名：
.html(网页文件)
3.网页文件的标准格式：
<!DOCTYPE html>
<!--根节点、根元素-->
<html>
<!--头部标记：放置具备特定功能的标记（不参与页面布局、内容展示的标记）-->
<head>
<!--编码指定：告知浏览器以何种编码方式来解析网页-->
<!--如果网页解析乱码，二选一。-->
<!--utf-8:解析中文的编码格式-->
<!--gb2312(gbk)-->
<meta charset="utf-8">
<!--网页标题-->
<title></title>
</head>
<body>
</body>
</html>DOCTYPE 翻译成中文就是 document 文档
声明文档类型 html5.0 格式文档
<!DOCTYPE html>：可加可不加，不加对页面内容展示无影响
但是对 SEO 搜索引擎有影响
4.本地与服务器运行的区别
双击.html文件后 打开的网页：file:///E:/html+css/day_01/dem01.html
用环境打开则有 http:// 开头
原因：服务器无法访问本地资源，
2.标签
只有两种：
双标签：
<tagName> </tagName>
单标签
<tagName> html5
<tagName/> html4
<meta charset="utf-8">
1.常用的html标签
s： 删除线
<b></b> <strong></strong> 字体加粗
<i></i> <em></em> 字体倾斜
<hr> 横线
sup：上角标
sub：下角标
b 加粗
p： 标签块
html元素
1.属性：修饰html标签
color: 颜色
size: 大小 1-7 最大为7 取值为8或者8以后的按照7算
align:水平对齐方式left |right|center
img ：图片
<img src="url" width="" height="">
h1-h6: 标题
font:大小、颜色、样式
br ：换行
u :下划线
注意问题：
1.属性不是必须的
2.属性具备不通用性
3.属性具备多元化特性
3.常用html的属性
color：颜色调整
broder:边框
width:宽度
height:高度
align:对其方法
cellspacing:內间距（单元格与单元格之间的间隙）
cellpadding:内边距（单元格与其内容之间的距离）
bacolor:背景颜色
background:背景图片
bordercolr:边框颜色
两个单元格合并成一个
列合并:colspan
跨行列合并:rowspan
下面是示例：直接全部复制即可运行
absmiddle图片与文字排版不对齐时，绝对居中
属性:
name:
value:默认值
placeholder:输入提示
maxlength:
readonly：只读
disabled: 禁用
required:非空验证
pattern="正则表达式"
^[A-Z]\w{5,14}$
checked ：默认选中
selected: 默认选中
multiple: 浏览框支持多文件选择
用户名 apple 首字符 大写字符 后续可以为 数字 字母 _ 6-151.字符实体
空格
> >
< <
自动换行：
2.块元素：
1.有宽度（默认宽度是其【父元素】的100%）
2.没有高度，依据内容的高度来撑开（默认）
3.支持高度调整
ul
li
div
h1-h6
p
br
hr ....
不能自动换行
注意：p标签 是否能够包裹其他块级元素 ----不能。
p标签 是否能够包裹自身 ----不能。
p标签 是否能够包裹 span 元素 ----能。
div -----作用于页面布局
p -----作用于段落文字
3.内联元素
1.没有宽度，依据内容的宽度撑开
2.具备默认高度
3.不再支持高度，宽度的调整
如：
如： b s i u font...
内联块
1.支持宽度、高度的调整
2.横向排列
如： img
4.超链接的表现形式：
<!-- 第一种 跳转交互 target="_blank" 可以是页面在跳转、交互时不在原页面上覆盖进行而是新建页面-->
<a href="http://baidu.com" target="_blank">跳转到百度</a>
<hr>
<!-- 第二种————发邮件 -->
<a href="mailto:2143478646@qq.com">发送邮件</a>
<hr>
<h3>表现形式三:直接执行js</h3>
<p>
<a href="javascript:alert('xxxx');">执行js</a>
</p>
<hr>
<h3>表现形式四:锚点链接(页面定位)</h3>
<p>
定义锚点:<a name="a1"></a>
获取锚点: <a href="#锚点名"></a>
</p>
1.跨页面超链接:
经常作用于目录，点击章节目录跳转到该章节内容
锚点链接
定义锚点:
<a name=""></a>
<a id=""></a>
捕获锚点:
<a href="#锚点名"></a>
<!--加载这个html页面 点击第一章 我们可以看到
<a href="demo4.html#a1" target="_blank">第一章</a>
这个a标签中已经绑定了 下面锚点的名字，因此可以直接跳转到 该锚点。
使用锚点时还要注意，将锚点置要跳转内容的上方，放在内容下方时，跳转到锚点，
会跳过要显示的内容
这个锚点可以跨越页面跳转 demo4，就是新的页面html名字
-->
<!-- 获取锚点 -->
<div class="b2">
<p><a href="demo4.html#a1" target="_blank">第一章</a> <a href="demo2.html#a4" target="_blank">第四章</a> <a href="demo3.html#p7" target="_blank">第七章</a><br>
<a href="demo4.html#a2" target="_blank">第二章</a> <a href="demo2.html#a5" target="_blank">第五章</a> <a href="#">第八章</a><br>
<a href="demo4.html#a3" target="_blank">第三章</a> <a href="demo2.html#a6" target="_blank">第六章</a> <a href="#">第九章</a><br></p>
</div>
<!-- 定义锚点 -->
<a name="a1"></a>
<h2 align="center">第一章</h2>
<p>虚空之树的警告出现，与以往几次不同的是，这次要扣除的虚空之树信誉度，额外标注了「巨量」。
这么久以来，苏晓对物品资料与提示中的「少量」、「中量」、「大量」、「巨量」，都有了比较深刻的了解，用比较通俗易懂的理解就是，前几个形容单位相加后乘以十倍，大概就是「巨量」这个单位的最低值了。
也就是说，如果继续召唤棘拉，那么本次虚空之树信誉度的扣除惩罚，将来的格外猛烈，对此，苏晓并不在意，他的虚空之树信誉度已经因为前几次召唤棘拉，变成-？？？了。
苏晓选择继续召唤，阵图中心处的超脱之刃直冲上方，仿佛划破了什么壁障瞬间，可上方的天棚却毫无损伤。
就在这岩石天棚上，一小块荧紫色生物组织出现，之后这荧紫色生物组织快速增殖，转眼就生出一大片，构成一道空间漩涡的同时，一只只恶魔虫族的利爪探出，在空间漩涡下构成向下的台阶。
一道娇小的身影顺着利爪台阶，从空间漩涡内走出，她的脖颈两侧有几条浅紫色甲壳，很平滑，而且紧贴着皮肤，除此之外，乍一看，苏晓召唤来的生物与人类无异，正是棘拉。
浅紫色精神触须在棘拉身后蔓延而出，很有威势，可见棘拉的实力，已与之前大不相同，但那有点迷茫的眼神，明显是在寝巢内睡的正香，突然被召来，多少有点懵逼，这导致她走下一节利爪台阶时，脚下一滑，然后就从台阶上翻滚下来，最后额头亲切的亲吻了地面后，棘拉双手握着额头，团在地上。
“……”苏晓单手轻按眉心，不断在心中告诉自己，这是自己培养的，没有威势不要紧，能力强就行了。
</p>
<hr>5.表格
<table border="" cellspacing="" cellpadding="">、
<-- th————一般用于表头标题 ，所使用的单元格内容会加粗 -->
<-- tr ————行 -->
<--td————列 -->
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
ul代表无序列表 li代表无序列表中的选项
emment语法
br* 50
*多个
> 子元素
+ 兄弟元素
{} 文本填充平 &
<table border="" width="400px" cellspacing="" cellpadding="">
<tr>
<th rowspan="4">
<input type="checkbox"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td>天使追</td>
<td>女</td>
<td>12343</td>
<td>删除</td>
<td>修改</td>
</tr>
<tr>
<td>天使彦</td>
<td>女</td>
<td>2312</td>
<td><input type="button" name="" id="" value="删除" /></td>
<td>修改</td>
</tr>
<tr>
<td>天使冷</td>
<td>女</td>
<td>2312sd</td>
<td>删除</td>
<td>修改</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列合并</title>
</head>
<body>
<p>
列合并:colspan
</p>
<p>
跨行列合并:rowspan
</p>
<table border="1" cellspacing="0" width="800px" height="600px" align="center">
<tr>
<td colspan="3">11111</td>
<td colspan="4">12222</td>
</tr>
<tr>
<td colspan="7">11111</td>
</tr>
<tr>
<td rowspan="2">11111</td>
<td></td>
<td rowspan="2">11111</td>
<td></td>
<td width="240px" bgcolor="red" colspan="3" rowspan="2">11111</td>
</tr>
<tr>
<td>111111</td>
<td>111111</td>
<!-- <td bgcolor="red" colspan="3">11111</td> -->
</tr>
</table>
</body>
</html>
下图：
6.表单：
存储客户端的数据信息、发送服务器与之交互
<form action="url提交地址xxx.py jsp php" method="提交方式post|get">
</form>
POST:
1、安全 表单数据 存储 request header 中
2、数据存储量理论上无限制（8M） ,
3、支持其他文件流传输 img zip 。。。
http://127.0.0.1:8848/html%2Bcss/day02/xxx.jsp
get:
1、不安全 提交数据会将数据以【？号传值|url传参】的方式在地址栏进行附着
2、128Kb 数据量 文本信息（提交数据量较小）
3、纯文本流
http://127.0.0.1:8848/html%2Bcss/day02/xxx.jsp?userName=dfgfdgfdg&password=dfgdfgdfg
跨页面传参(模拟get表单提交)
<a href="XXX.JSP?ID=1&keyword=xxxx"></a>
enctype="multipart/form-data 表单有文件上传时必须加，没有文件上传时可以不加
表单常用属性我写在下面了 ，可以全部复制，用我上述的两个环境之一打开即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单$表单元素</title>
</head>
<body>
<!-- enctype="multipart/form-data 表单有文件上传时必须加，没有文件上传时可以不加
表单中没有用户介入 如： 用户名框 用户要输入用户名，这就是介入了
而选项框就没有用户介入 就使用 value 来提交到服务器
泰山崩于面而色不变 鹿兴与左而目不瞬
css
层叠样式表、级联样式表
css3.0
html：页面架构的搭建
css:排版、特效（表现层）、将页面结构与表现进行分离
js:动态效果（特效层）
图片居顶部对齐
-->
<form action="url" method="post" enctype="multipart/form-data">
<!-- maxlength maxlength 规定输入字段的最大长度 文本框内最多输入20个字符
required 规定必需在提交表单之前填写输入字段。
pattern 属性规定用于验证输入字段的模式。 模式指的是正则表达式 详情java
type="password" 在该文本框输入时，显示的数字和符号会以圆点或星号表示
multiple 属性规定输入字段可选择多个值 能上传的文件可以选择多个，按住ctrl+ 选择的文件 即可
isabled 属性规定应该禁用 input 元素。 使用该属性后 文本框不可点击 编辑 只能观看 里面的字体也变成了灰色
checked 属性预先选定单选框或复选框按钮
name="linke[]" [] 的作用 当你选中多个多选框，点击提交的服务器，他只会显示你选中的最后一个选项的内容，加上[] 你选中的多选框的全部内容都会在后台服务器中显示出来
option selected ="selected" selected 属性规定在页面加载时预先选定该选项。
-->
文本框： <input type="text" name="UserName" pattern="^[A-Z]\w{5,14}$" maxlength=20"" required="提交前必须输入字段" placeholder="提示输入内容" /><br>
密码框： <input type="password" name="PassWord" id="" value="" /><br>
<input type="submit" name="" id="" value="登录" /><br>
文件上传： <input type="file" name="upfile" multiple> <br>
数字输入： <input type="number" disabled="disabled" name="number"><br>
邮箱输入：<input type="email" disabled name="email"><br>
时间日期 <input type="datetime" required name="date"></input><br>
<input type="date" name="date2" id="" value="" /><br>
<input type="datetime-local" name="date3" id="" value="" /><br>
单选框
<input type="radio" checked="checked" name="sex" id="" value="男" />男
<input type="radio" name="sex" value="女" />女
<br>
多选框
<input type="checkbox" name="linke[]" id="" value="a" />A
<input type="checkbox" name="linke[]" id="" value="b" />B
<input type="checkbox" name="linke[]" id="" value="c" />C
<input type="checkbox" name="linke[]" id="" value="d" />D
下拉框
<select name="selector" id="">
<option value ="0">请选择</option>
<option value ="1">选项1</option>
<option selected ="selected" value="2">选项2</option>
<option selected value ="3">选项3</option>
</select>
<br>
按钮
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
<input type="image" src="btn.png" width="200px"/>
<input type="button" name="" id="" value="自定义按钮" />
<button type="reset">按钮</button>
</form>
</body>
</html>
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
