二、HTML介绍
- 介绍
- HTML超文本标记[标签]语言 [HyperText Markup Language]
- HTML不是编程语言，就是标记标签语言，预先设定好了一套标记标签！
- HTML使用标签来描述和设计页面
- HTML组成： 标签 + 文本
- HTML编写的文件也称作WEB页面
- 学习目标：学习HTML的标签使用
- 作用
- HTML : 负责页面的整体骨架和内容，内部包含标签！ 例如： 按钮，输入框，文本展示框，超链接，图片等等！
- CSS : 页面的整体样式设计 【怎么展示，白色的字体，黑色的背景 圆角图片等等】和页面的布局设计 【标签放置的位置】
- JavaScript : 负责页面的交互和业务逻辑操作
- 基本结构
① HTML 基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- h1 - h6 标题,标题的级别! 越小文本越大
加粗
加黑
变大
独占一行
-->
<h1>大家一定要注意疫情防控</h1>
<h3>只要我们团结一心</h3>
<h6>终有一天疫情会消失</h6>
集中隔离,确保疫情不扩散,坚持动态清零政策不动摇!
</body>
</html>
使用 Xbuilder
运行结果如下:
②HTML表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
展示学生信息表格
学号 姓名 年龄 性别
1 x x x
表格标签也是一个组合标签 ：
table表格
width 宽度
align 对其方式 center left right
border 尺寸单位，边框的粗度
bordercolor 边框的颜色
cellspacing 边框的间隔
tr 【table row】 行 align left center right 一行内容对其方式
td 【table data】 列
th 【table head】 自动居中，加粗 加黑
align left center right 一列数据的对其方式
-->
<table width="60%" align="center"
border="1px" bordercolor="red" cellspacing="0px">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td align="right">001</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>
运行结果如下:
③HTML的form表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
input 输入标签
type : 决定标签的展示形状
text:文本输入框
password:隐藏显示密码内容
radio :单选框 一组单选框的name值相同!
checkbox :多选框 一组多选框name值相同!
placeholder : 提示语
name:放value对应的key,后期向后台成对传递! 自定义!
value:向后台传递数据的值! 非输入类型的表单才会声明
例如: 单选框, 多选框 ,下拉框
select 下拉框 声明name属性!
option 选项 value= 值 selected=selected 选中
-->
<br><br>
<h3>用户注册</h3>
<!--
我们声明了很多的输入标签!
但是不知道向哪提交!
在输入标签外套form标签!
添加提交的时候,会自动将数据打包 key=value
向form action 指定的后台地址提交数据!
action=后台地址
method=http 协议的提交方式 get | post
区别:
1、get是从服务器端获取数据；post是修改数据
2、get提交的数据会展现的浏览器的url中，且有长度显示；而post不会
3、get回退浏览器是从缓存中取数据；而post是重新创建新请求
4、get可以保存为书签；post不能
5、get能被缓存；post不会
6、get只允许ASCII字符；post没有限制
7、get请求会保存在浏览器历史记录中；post不会
-->
<form action="#" method="get">
<font color="red">账号:</font>
<input type="text" name="account" placeholder="请您输入账号!">
<br>
<font color="red">性别:</font>
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female">女
<br>
</form>
</body>
</html>
运行结果如下:
二.CSS技术
1.介绍:
层叠式样式表
定义HTML标签的展示样式
HTML标签本身有一些样式修饰，但是比较单一，使用CSS可以随意修饰样式，样式更加丰富！
CSS不区分标签，样式可以作用到所有标签
CSS可以在外部定义一个样式文件.css,最终一定会引入到对应HTML文件中，并指定标签进行生效！
2.CSS代码引入方式 [css样式引入到html文件中]
行内
<!-- 行内引入css代码
<开始标签 style="css样式:样式值;css样式:样式值;"
优点：直观,省去了选择器语法
缺点：只能作用到单一标签，无法实现复用！html代码和css样式混合到一起，不方便调试！
-->
<p style="color: red;font-size: 100px;">行内加入CSS代码</p>
<p style="color: red;font-size: 100px;">再一次在行内加入CSS代码</p>
2.内部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/**
*
* 内部方式： 内部html文件内部编写css样式代码！
*
* head标签/style标签/css样式
优势：作用范围大于行内,一个html文件中都可以复用！
缺点：内部要写选择器，指定作用的标签了！复用范围还是小！html代码和css代码还是没有分离！
*/
p{
color: #fb5832;
font-size: 100px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<p>第一个人</p>
<p>第二个人</p>
</body>
</html>
3.外部
①外部【推荐】
1.外部声明一个css文件 xxx.css
选择器{
css样式
}
2.html使用link标签引入css文件
link标签必须出现在head标签中
<link rel="stylesheets" type="text/css" href="网络地址|本地相对路径">