HTML和CSS
- 用途：用来写页面
- CSS：用来决定页面的布局、样式、效果
- B/S软件结构和C/S软件结构
- JavaSE为C/S结构，也就是Client和Server
- B/S结构是Browser和Server
- 前端（页面）的开发流程
- 设计、美术、UI、PS等做出来效果图
- H5来做页面（静态页面，没有图形化）
- 将静态页面转成动态【这里主要学习的】
- 网页的组成部分
- 内容（结构）：我们在页面中可以看到的数据。一般使用html技术来展示
- 表现：数据呈现的效果，比如布局、颜色、大小等。一般使用CSS技术实现
- 行为：页面中元素与输入设备交互的响应。一般用javascript技术实现
HTML：Hyper Text Markup Language，超文本标记语言
-
通过标签来标记要显示的网页中的各个部分。
- 网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
- 比如：文字如何处理，画面如何安排，图片如何显示等
-
创建HTML文件
- 创建一个web工程（静态的web工程）
- 新建一个HTML文件
- 右键运行，在网页中输出（右边可以选择执行的浏览器）
-
书写规范：
<html> 表示整个html页面的开始 <head> 头信息 <title>标题</title> </head> <body> 页面的主体内容 页面主体内容 </body> </html> 表示整个html页面的结束 <!-- --> html中的注释，ctrl+shift+/<!DOCTYPE html> <!-- 约束，声明 --> <html lang="en"> <!-- html标签表示html的开始，lang="zh_CN"表示中文，"en"表示英文 --> <!-- html标签一般分为两部分，分别是head和body --> <head> <!-- 表示头部信息，一般包含三部分：1.title标签，2.css样式，3.js代码 --> <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 --> <title>Title</title> <!-- 标题 --> </head> <body> <!-- body标签是整个html页面显示的主体内容 --> hello </body> </html> -
标签介绍：
- 格式：<标签名>封装的数据</标签名>
- 标签名大小写不敏感
- 标签拥有自己的属性：
- 基本属性，可以修改简单的样式效果。比如bgcolor，修改背景色
- 事件属性，可以直接设置事件响应之后要完成的效果的代码。比如，οnclick=“alert(‘你好！’);”，点击之后弹出警告框，并输出提示信息“你好！”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body bgcolor="#faebd7" onclick="alert('输了')"> hello <button onclick="alert('输了')">按钮</button> <!-- 弹出两次警告框，并且这句话会有一个按钮显示--> </body> </html>-
单标签和双标签
- 单标题：<标签名 />，比如br（换行）、hr（水平线）
- 双标签：<标签名>…封装的数据…</标签名>
-
标签的语法：
-
标签不能交叉嵌套（浏览器可以帮助修正）
<div><span>早安</span></div> <!-- right --> <div><span>早安</div></span> <!-- wrong --> -
双标签必须正确的闭合（浏览器可以帮助修复）
-
单标签不要遗漏/（浏览器可以帮助修复）
-
属性必须要有值，并且用引号引起来
-
注释不能嵌套
-
常用标签介绍
font标签，字体标签，用来修改文字
<body bgcolor="#faebd7" onclick="alert('输了')">
<!-- 字体标签，宋体、红色、大小【1-7】-->
<font color="red" face="宋体" size=5>你好漂亮</font>
</body>
特殊字符
<!-- 把<br>换行标签输出在文本上 -->
<br>
-
最常用的是
<!-- < < > > 空格 -->
标题标签
<!-- 由大到小 -->
<!-- h1-h6 -->
<!-- align对其属性，默认为左对齐，可自适应 -->
<h1 align="left">1</h1>
<h2 align="center">2</h2>
<h3 align="right">3</h3>
<h4>4</h4>>
<h5>5</h5>
<h6>6</h6>
超链接【重点】
网页中所有可以点击跳转的都是超链接
<!-- 超链接 -->
<!--
a标签是超链接
href属性设置链接地址
target属性设置那个目标进行跳转
_self：在当前页面跳转
_blank：打开新页面进行跳转
-->
<a href="https://www.baidu.com/">度娘</a>
<a href="https://www.baidu.com/" target="_self">度娘</a>
<a href="https://www.baidu.com/" target="_blank">度娘</a>
列表标签
<!--列表标签
无序列表
有序列表
定义列表：不常用
li为列表项
type属性可以修改列表项前的符号
-->
<!-- 无序列表 -->
<ul type="">
<li>zs</li>
<li>ln</li>
<li>sxb</li>
<li>xsy</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>zs</li>
<li>ln</li>
<li>sxb</li>
<li>xsy</li>
</ol>
【与浏览器有关的，或多或少都存在兼容问题，因为不同的厂商】
img标签：用来在html界面上显示图片
<!--img标签，图片标签，用来显示图片
src属性，可以设置图片的路径
在JavaSE中路径分为绝对路径和相对路径两种
相对路径：从工程名开始算
绝对路径：盘符:/目录:/文件名
在web中路径分为绝对路径和相对路径两种
相对路径：
.：当前文件所在的目录
..：当前文件所在的上级目录
文件名：表示当前文件所在目录的文件，相当于./文件名
绝对路径：
格式是：http://ip:port/工程名/资源路径
错误格式：盘符:/目录:/文件名
alt属性用来设置当指定路径找不到图片是用来代替的文本
-->
<img src="./img/logo%20拷贝.jpg" width="100" height="120" border="20" alt="哇呀呀"/>
表格标签
<!--表格标签<table>
border属性设置表格边框
center属性设置表格相对于页面的对齐方式
cellspacing属性设置单元格间距，0为单元格相邻【注意，不等于重叠，所以是2个像素】
<tr>：行标签
<th>：表头标签
<td>：单元格标签
<b>：加粗
-->
<!-- 三行三类的表格，带表头，并显示边框 -->
<!-- 修改表格的宽度、高度、对齐方式、单元格间距 -->
<table border="1" width="300" height="300" align="center" cellspacing="0">
<tr>
<td align="center"><b>1.1</b>1.1</td>
<th>1.2</th>
<td>1.3</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
</table>
<!-- 表格的跨行跨列效果
<td>属性
colspan：跨列
rowspan：跨行
-->
<!--
5行5列的表格: table>tr*5>td*5 + tab
第一行，第一个单元格要跨两列
第二行，第一列的单元格要跨两行
第四行，第四列的单元格跨两行两列
-->
<table border="1" cellspacing="0" height="500" width="500">
<tr>
<td colspan="2">1.1</td>
<!--<td>1.2</td>-->
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<!--<td>3.1</td>-->
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
<!--<td>4.5</td>-->
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<!--<td>5.4</td>-->
<!--<td>5.5</td>-->
</tr>
</table>
iframe标签（内嵌窗口）【重点】
- 功能：它可以在一个html页面上，打开一个小窗口去加载一个单独的页面
<iframe src="iframe.html" width="500" height="400"></iframe>
<!-- 不要用单标签，否则下方内容无法显示 -->
-
应用：
- 网页左侧的菜单
<!-- iframe和a标签组合使用 1.在iframe标签上面使用name属性上定义一个名称 2.在a标签的target属性上设置iframe的name的属性值 --> <br/> <iframe src="iframe.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="iframe.html" target="abc">给我跳</a> </li> <li><a href="第二页.html" target="abc">第二个</a></li> <li>第三个</li> </ul>
表单标签【重点】
- 定义：html页面中用来收集所有元素集合，然后把这些信息发给服务器
<!-- form标签，表示表单
input标签
value属性，显示默认的初始值
属性type="text"，单行的文本输入行，回车取消内容，不换行
属性type="password"，密码输入框，显示“*”
属性type="radio"，单选框，
属性name，用于分组，同一分组只能选择一个
属性checked="checked"，用于设置默认选项
属性type="checkbox"，复选框
属性checked="checked"，用于设置默认选项
属性type="reset"，重置内容为默认值
属性value，更改按钮上的文字显示
属性type="submit"，提交按钮
属性value，更改按钮上的文字显示
属性type="button"，创建一个按钮，上面的文字用属性value设置
属性type="file"，实现文件上传
属性type="hidden"，隐藏域，当我们要发送某些信息，而这些信息不需要用户参与，可以使用隐藏域（提交的时候同时发给服务器）
select标签表示下拉列表
option标签表示选项
属性selected="selected"，用于设置默认选项
textarea标签表示多行文本输入框
rows属性设置可以显示几行的高度，超过将显示滚动条
cols属性设置每行可以显示几个字符宽度
其实标签和结束标签之间的内容为默认值
-->
<!-- 创建一个个人信息注册的表单界面
包含用户名
密码
确认密码
性别（单选）
兴趣爱好（多选）
国际（下拉列表）
隐藏域、自我评价（多行文本域）
重置
提交
-->
<form>
用户名称：<input type="text" value="默认值"/><br/>
用户密码：<input type="password"/><br/>
确认密码：<input type="password"/><br/>
性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio"name="sex"/>女<br/>
兴趣爱好：<input type="checkbox"/>java<input type="checkbox"/>javaweb<input type="checkbox"/>R<br/>
国籍：<select>
<option>--请选择国籍--</option>
<option selected="selected">--中国--</option>
<option>--中国--</option>
<option>--中国--</option>
</select><br/>
自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
<input type="reset"/>
<input type="submit"/>
<input type="button" value="abc"/>
<input type="file"/>
<input type="hidden" name="abc" value="ttttt"/>
</form>
表单格式化
- 一般的表单用表格来表示，这样格式更加美观
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio"name="sex"/>女</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox"/>java<input type="checkbox"/>javaweb<input type="checkbox"/>R</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="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset"/></td>
<td><input type="submit"/></td>
</tr>
</table>
</form>
表单提交的细节
<!--form标签是表单标签
action属性设置提交的服务器地址，但是人家不一定收
method属性设置提交的方法，GET（默认）或者POST
GET请求的特点：
1.浏览器地址栏中的属性是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2.不安全
3.它有数据长度的限制
POST请求的特点：
1.浏览器地址栏中，只有action的属性值，也就是服务器地址
2.相对于GET请求要安全
3.理论上没有数据长度的限制
表单提交的时候，数据没有发送给服务器的三种情况
1.表单项没有name属性值，所以只要想发送给服务器就必须带name属性
2.单选、复选（下拉列表的option标签）都需要添加value属性
3.表单项不在提交的form标签中
-->
其他标签
- 三者的功能都使用来针对文字的
- div：默认独占一行
- span：它的长度是封装数据的长度
- p：默认会在段落的上方或下方各空出一行（如果有，则不再空出）
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落标签1</p>
<p>段落标签2</p>
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
