day1
HTML CSS
HTML—设计框架和内容 CSS—设计样式
C/S–客服端/服务器 B/S—浏览器/服务器
前端开发—页面开发:
UI-设计网页样式
前端工程师–设计静态网页(HTML、CSS、javascript)
java程序员–将静态网页修改为动态网页
网页组成部分—内容(结构)、样式/表现、行为(页面元素与输入设备交互的响应)
HTML
超为文本标记语言—hyper text makup language
创建HTML文件:
1.创建一个web工程,在工程下创建HTML页面
new–project–static web–finash–project name—创建HTML页面
2.HTML页面结构
<!DOCTYOE html><!-- 声明约束-->
<html lang="zh_CN"><!--html标签代表HTML的开始, lang="zh_cn"代表中文,在HTML中一般有两部分,一是head而是body-->
<head><!-- 头部信息,一般包括三个部分,title标签,CSS样式,JS代码脚本-->
<title>标题</title><!--设置标题 -->
<meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集 -->
</head>
<body>
包含HTML的主体内容
</body>
</html>
3、HTML的标签
标签:
-
块标签
-
自结束标签/单标签
-
标签不能交叉嵌套----但浏览器会自动修复部分错误
正确:
```
早安,小陆
```
错误:
<div><span>早安,小陆</div></span>
-
标签必须正确的关闭/闭合,即结束标签,单标签也必须在后面加/ 如
<br/>
-
属性必须有属性值,同时不能缺少双引号
标签属性:
(1)基本属性 —设置或修改一些基本的样式
(2)事件属性–设置事件响应后的代码
<!DOCTYPE html><!--声明-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body bgcolor="white">
hello world
<br><!-- 换行-->
<hr><!-- 水平线-->
<!-- 标签属性:
(1)基本属性 ---设置或修改一些基本的样式
(2)事件属性--设置事件响应后的代码
标签:W3school.com.cn
-->
<p onclick="alert('hello')">单击</p><!--段落-->
<!-- font字体标签 color修改颜色 size设置字号 face设置字体-->
<font color="red" face="宋体" size="6">设置字体</font>
<!--
特殊字符 的使用,用字符实体表示
常用特殊字符:
空格---
-->
i am from china<br/>
i am       from china<br/>
<!-- 标题标签<hn>n从1-6,数字越大,字号越小,默认是左对齐-->
<h6 >标题6</h6>
<h6 align="right">标题6</h6>
<h6 align="center">标题6</h6>
<!-- 超链接-->
<a href="http://www.baidu.com">百度</a>
<br/>
<!-- 在新窗口打开链接 target属性 _self在当前页面跳转_blank在新窗口打开,默认为当前窗口-->
<a href="https://w3school.com.cn" target="-blank">W3C</a>
<!-- 列表标签ul无序列表,ol 有序列表 type设置列表前面的符号none取消,-->
<ul type="none">
<li>姓名</li>
<li>年龄</li>
</ul>
<ol>
<li>test1</li>
<li>test2</li>
</ol>
<!--
img标签用于显示图片 路径分为相对路径和绝对路径
相对路径--相对于当前目录的路径./可以省略
绝对路径---http://ip:port/工程名/资源路径
在web中绝对路径不能用盘符:/目录/文件名
width设置图片宽度,height设置图片高度 border为图片设置边框,单位像素--一般设置为1 alt--设置当指定路径找不到时,用来代替显示的文本内容
-->
<img width="100" height="100" src="https://img0.baidu.com/it/u=1269735713,3500557622&fm=26&fmt=auto&gp=0.jpg"/>
<!--
table 表格标签 单元格间距cellspacing
表格跨行跨列
-->
<table align="center" border="1" width="200" height="200" cellspacing="0">
<tr><!--行标签,一行 b标签是加粗标签 -->
<td align="center"><b>单元格</b></td>
<th>表头标签</th>
<td>单元格标签</td>
</tr>
<tr>
<!-- 跨行跨列跨列colspan,跨行rowspan-->
<td colspan="2">单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!--iframe标签,在HTML中iframe必须用双标签在HTML页面上打开一个窗口去加载一个单独页面 -->
<iframe src="html2.html" width="500" height="200" name="hh"></iframe>
<br>
<!--iframe和a标签组合使用:1、在iframe中使用name属性定义一个名称,在a标签中使用target上设置iframe的name属性值 -->
<a href="./html2.html" target="hh">跳转到html2.html</a>
<p>段落测试</p>
<!--表单标签用来收集用户信息的所有元素的集合 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
</head>
<body>
测试<br>
<img src="https://img2.baidu.com/it/u=3282188054,420167424&fm=26&fmt=auto&gp=0.jpg" width="200" height="200"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单格式化</title>
</head>
<body>
表单的格式化,使页面更完美。将表单放在表格中展示
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<!--行标签 -->
<tr>
<td>用户名称:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" checked="checked" name="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox"/>java
<input type="checkbox"/>c++
<input type="checkbox"/>JavaWeb
</td>
</tr>
<tr>
<td>国籍:</td>
<td> <select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select></td>
</tr>
<tr>
<td>自我评价:</td>
<td>
<textarea rows="4" cols="10">默认值</textarea>
</td>
</tr>
<tr>
<td> <input type="submit"/></td>
<td><input type="reset" /></td>
</tr>
</table>
用户名称:<input type="text"/><br/>
用户密码:<input type="password"/><br/>
性别:<input type="radio" name="sex"/>男<input type="radio" checked="checked" name="sex"/>女<br/>
兴趣爱好:<input type="checkbox"/>java<input type="checkbox"/>c++<input type="checkbox"/>JavaWeb<br/>
国籍:
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
<br/>
自我评价:<textarea rows="4" cols="10">默认值</textarea><br/>
<input type="reset"/><br/>
<input type="submit"/><br/>
<input type="button" value="按钮"/><br/>
<input type="file" /><br/>
<input type="hidden">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交细节</title>
</head>
<body>
<!--
form表单标签,两个重要属性,
一是action属性--设置提交的服务器地址
二是method属性--设置提交的方法,方法get(默认值),post方法
http://localhost:8090/--服务器地址
?分隔符
action=login 请求参数/表单信息
表单提交时数据没有发送给服务器的原因:
1-表单项没有name属性值
2-单选,复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
3--表单项不在提交的form标签中
提交方法:
get:浏览器地址栏中是浏览器地址+?+请求参数,参数格式是name=value用&连接
不安全,应为在地址栏可以看到参数
有数据长度的限制若表单值超过一定能限度需要用post
post:浏览器地址栏中只有action的属性值,即服务器地址,相对安全,没有数据长度的限制
-->
<form action="http://localhost:8090" method="post">
<input type="hidden" name="action" value="login"/><br>
<h1 align="center">用户注册</h1>
<table align="center">
<!--行标签 -->
<tr>
<td>用户名称:</td>
<td><input name="name" type="text"/></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" checked="checked" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" name="interest" value="java"/>java
<input type="checkbox"/>c++
<input type="checkbox"/>JavaWeb
</td>
</tr>
<tr>
<td>国籍:</td>
<td> <select name="国籍">
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select></td>
</tr>
<tr>
<td>自我评价:</td>
<td>
<textarea rows="4" cols="10">默认值</textarea>
</td>
</tr>
<tr>
<td> <input type="submit"/></td>
<td><input type="reset" /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<!--div标签 ,默认独占一行-->
<div>
世人皆负我,举世皆可杀
匹夫无罪,怀璧其罪
</div>
<!--span标签 ,标签内文字有多长,标签就有多长,即长度是封装数据的长度-->
<span>
世人皆负我,举世皆可杀
匹夫无罪,怀璧其罪
</span>
<!--p标签段落标签,默认会在段落的上方和下方空出一行 -->
<p>
世人皆负我,举世皆可杀
匹夫无罪,怀璧其罪
</p>
</body>
</html>
html>
世人皆负我,举世皆可杀 匹夫无罪,怀璧其罪
世人皆负我,举世皆可杀 匹夫无罪,怀璧其罪
世人皆负我,举世皆可杀 匹夫无罪,怀璧其罪
```