HTML与CSS
HTML简单标签
<!DOCTYPE html>
必须是HTML文档的第一行;它是指示web浏览器关于页面使用哪个html版本进行编写指令
<!---->
注释标签
<html lang="zn_CN">
html标签代表html的开始， lang = "zh_CN"表示中文 html标签中分为俩部分：分别是head和body
head 表示头部信息，一般包含三个部分，title标签，css样式，js代码
<br/>
换行
<hr/>
水平线
<h>
<!--
标题的尺寸为h1 - h6
h1最大，h6最小
align 属性是对齐属性
left 左对齐
right 右对齐
center 居中
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<font>
font标签是字体标签，可以设置字体的颜色，尺寸，字体
<!-- 字体标签
font标签是字体标签，可以设置字体的颜色，尺寸，字体
-->
<font color="red" face="宋体" size="5">我是字体</font>
<iframe>
iframe标签可以在页面上开辟一块小区域，显示单独的页面
iframe和a标签结合使用的步骤
1.在iframe标签上使用name定义一个名称
2.在a标签的target属性上设置iframe定义的名称
<iframe src="font标签.html" width="200" height="200" name="abc"></iframe>
<br/>
<hr/>
<li><a href="标签语法.html" target="abc">0.标签语法</a></li>
<li><a href="超链接.html" target="abc">超链接</a></li>
<img>
<!-- 需求：使用img标签显示一张图片，并修改宽高，和边框属性
img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性可以设置图片的宽度
heigth属性设置图片的高度
border属性设置图片的边框大小
alt属性设置图片为找到时用来替换的内容
Javase中
相对路径：从工程名开始算
绝对路径：盘符/目录/文件名
web中
相对路径：
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在的目录的文件 相当于./文件,且./省略
绝对路径：
http://ip:port/工程名/资源路径
-->
<img src = "" width="200" height="128" border="1" alt="图片找不到了">
<img src = ./tp1.png width="200" height="128" border="2">
<img src = ./tp1.png width="200" height="128" border="10">
<img src = ./tp1.png width="200" height="128" border="20">
<img src = ./tp1.png width="200" height="128">
列表
<!--
1.ul是无序列表
type属性可以修改列表项前面的符号
2.ol是有序列表
3.li是列表项
-->
<ul type="none">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
表单
<!-- form标签就是表单
input type = text 是文本输入框，value设置默认内容
input type = password 是密码输入框，value设置默认内容
input type = radio 是单选框，name可以对其进行分组，check = “check”表示默认选中
input type = checkbox 是复选框，check = “check”表示默认选中
input type = reset 是重置按钮，value可以设置默认内容
input type = submit 是提交按钮，value可以设置默认内容
input type = button 是按钮，value可以设置默认内容
input type = file 是文件上传域
input type = hidden 是隐藏域
select标签是下拉列表框 selected = "selected"可以设置默认选中
option标签是下拉列表框中的选项
textarea标签是多行文本框（起始标签和结束标签之间的值为默认值）
rows属性设置显示几行的高度
cols属性设置显示几列的宽度
注意：想让表单更美观，将表单放于表格中
------------------------------------表单提交的细节--------------------------------------------
action属性设置提交的是服务器地址
method属性设置提交的方式get或者post
提交表单的时候，数据没有发送的服务器的三种情况
1.表单中没有name属性值
2.单选，复选中没有添加value值
3.表单项不在提交的form标签中
GET请求的特点：
1.浏览器中的地址为：action属性+？+请求参数
2.不安全
3.有数据长度限制
POST请求的特点：
1.浏览器中地址只有action属性
2.安全
-->
<form action="http://localhost:8080" method="get">
用户名称:<input type="text" name="username" value="张三"><br/>
用户密码:<input type="password"name="password" value="asd"><br/>
验证码:<input type="text" name="yzm" size="4"> <input type="button" value="获取验证码"><br/>
性别:<input type="radio" name="sex" value="b" checked="checked">男 <input type="radio" name="sex"value="g">女<br/>
曾经使用过:<input type="checkbox" checked="checked" value="hh">幻核<input type="checkbox"value="jt">鲸探<input type="checkbox"value="hc">幻藏<br/>
国籍:<select>
<option selected="selected"value="cn">中国</option>
<option value="am">美国</option>
<option value="jp">日本</option>
</select><br/>
修改建议:<br/><textarea rows="10" cols="40">感谢您的宝贵意见</textarea><br/>
上传图片<input type="file"><br/>
<hr/>
<input type="reset"> <input type="submit">
表格标签
<!--
需求1:做一个带表头的三行三列表格，并显示边框
需求2:修改表格的宽度，高度，表格的对齐方式，单元格的间距
table标签是表格标签
border设置表格标签的边框
width设置表格的宽度
height设置表格的高度
align设置表格的文本对齐方式
cellspacing设置边框之间的距离
tr是行标签
th是表头行标签
td是单元格标签
align是单元格对齐方式
b是加粗标签
colspan属性设置跨列
rowspan属性设置跨行
-->
<table border="1" align="center" width="200" height = "150" cellspacing="0">
<tr height = "20">
<th colspan="2" rowspan="2">1.1</th>
<th>1.2</th>
</tr>
<tr align="center">
<td >2.1</td>
</tr>
<tr align="center">
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
超链接
<!--
a标签是超链接
href属性是设置哪个目的界面进行跳转
target属性是设置哪个目标进行跳转
_self 表示当前界面
_blank 表示新建界面
-->
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度</a><br/>
注意：
1.标签不能交叉嵌套
2.双标签必须要关闭
3.属性必须要有值，属性必须要用“”
4.标签不能重复嵌套
CSS简单标签
ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#1001{
color: red;
}
#1002{
color: antiquewhite;
}
</style>
</head>
<body>
<!-- 通过id属性选择性的使用
-->
<div id="1001">1001</div>
<div id="1002">1002</div>
</body>
</html>
link选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签引入css-->
<link rel="stylesheet" type="text/css" href="2-css.css">
</head>
<body>
<div>1231312312</div>
</body>
</html>
标签名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 1px red solid;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
class类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.class01{
border: 1px red solid;
}
.class02{
border: 1px yellow solid;
}
</style>
</head>
<body>
<div class="class01">123</div>
<div class="class02">123</div>
</body>
</html>
