一、HTML
1.HTML 网络的骨架
超文本标记语言
①超文本 图片、音频、视频、普通文本。。。
②标记语言
语法:通过标签的形式展示
a.双标签
<html>内容</html>
b.单标签
<br>
2.HelloWorld
①新建网页文件(后缀为.html的文件)
②创建网页的基本结构
<html>
<head></head>
<body>
HelloWorld
</body>
</html>
③通过开发工具IDEA
<!DOCTYPE html> //版本的标识
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
要展示在页面的内容
</body>
</html>
- head中的内容
①meta单标签
<meta charset="UTF-8">
charset="UTF-8" 属性
设置网页的编码格式为UTF-8
②title双标签
<title>网页的标题</title>
③style
④base
⑤script
⑥link
...
- body中的内容
1、标题标签 字体大小、加粗、换行
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签 标记为一个段落,换行功能
<p></p>
3、换行标签
<br/>
4、列表
无序列表
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
...
</ol>
默认是阿拉伯数字
通过属性进行修改:type="i"
5、超链接
<a href=""></a>
跳转的目的地:
href=""
<a href="http://baidu.com">点击跳转至百度</a>
设置新窗口的打开方式:
target=""
_self 本窗口(默认)
_blank 新窗口
6、图片标签
<src="" img/>
设置图片的路径:
src:""
设置大小:
宽度 width="" px
高度 height=""
7、块标签
div div+css 主流布局方式
盒子模型
span 没有任何效果的双标签
8、实体
< <
> >
空格
- HTML的语法规则
①注释
<!-- 注释内容 --!>
②规则
跟标签(html)有且只能有一个
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套
注释不能嵌套
标签不区分大小写但建议使用小写
- 表格
标签名:
<table>
<tr>
<td></td> 或 <th></th>
...
</tr>
</table>
table中的属性:
border="1"
width="300px"
height="300px"
align="center" 设置表格的位置
tr中的属性:
height="300px"
align="right" 设置内容的对齐方式
td中也有属性
width="300px"
height="300px"
align="right"
单元格的合并:
跨列:colspan="2"
跨行:rowspan="2"
- 表单(最重要)
用户名、密码、验证码、手机号、邮箱、性别、生日、地址、户籍、爱好、政治面貌、上船头像
<form action="数据提交的位置" method="请求方式get/post">
表单项:
name="" 自定义名字
是作为传到后台数据的key值
value="" 用户输入的数据
是作为传到后台数据的value值
① 文本框 <input/>
type="text"
② 密码框 <input/>
type="password"
③ 单选按钮 <input/>
type="radio"
设置单选效果:在n个单选按钮上添加name属性,并起相同属性值
默认选中 在需要设置默认选中的按钮上添加属性checked
案例:
<input type="radio" name="gendar" value="0"/>男
<input type="radio" name="gendar" value="1" checked/>女
④ 生日 <input/>
type="date"
⑤ 下拉表单
<select name="">
<option value=""></option>
<option></option>
<option></option>
...
</select>
默认选中
在需要被选中的option标签上添加属性selected
⑥ 复选框 <input/>
type="checkbox"
name=""
value=""
⑦ 文件表单 <input/>
type="file"
name=""
⑧ 多行文本域
<textarea name=""></textarea>
⑨ 隐藏域 <input/>
type="hidden"
⑩ 三种类型的按钮
普通按钮 type="button"
<input type="button" value="按钮上的文字">
提交按钮 type="submit"
重置按钮 type="reset"
</form>