HTML
常用标签
字体标签 font
color: 颜色
size: 大小 1~7
face: 改变字体
p 段落标签
h标题标签 : 1~6(H1最大)
br 换行
hr 水平线
b 加粗
i 斜体
strong : 加粗 包含语义
em : 斜体 包含语义
img标签
src : 指定图片的路径
width: 宽度
height: 高度
alt : 图片加载错误时的提示信息
相对路径:
./ 代表的是当前路径
…/ 代表的上一级路径
…/…/ 代表的上上一级路径
ul: 无序列表
type :
ol: 有序列表
type : 样式
start : 起始索引
li : 列表项
a 超链接标签
href : 要访问的链接地址
target : 打开方式
table标签
border: 指定边框
width : 宽度
height : 高度
bgcolor : 背景颜色
align : 对齐方式
tr标签(行)
td标签(列)
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉`
<!--声明:告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--注释-->
<!--网页主体-->
<head>
<meta charset="UTF-8">
<!--搜索关键字-->
<meta name="keywords" content="Java">
<!--网页的描述-->
<title>一个假网页</title>
</head>
<!--网页主体-->
<body>
<!--标题标签-->
<!--H1最大,H6最小-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>hh</p>
<p>哈哈哈</p>
<!--换行标签-->
<!--br 单标签-->
hhh<br>
<!--hr 水平线标签-->
<hr>
<!--b 加粗标签 strong 加粗-->
<b>啦啦啦</b>
<strong>看看看看</strong>
<!--i 斜体 em 斜体-->
<i>哈哈哈</i>
<em>哦哦哦</em><br>
<!--特殊符号-->
大于号 : ><br>
小于号 : <<br>
空格 : 你 好<br>
引号:"<br>
版权符号: ©版权所有<br>
<!--图像标签-->
<!--
src 图片路径
title 图片悬停显示
alt 图片名字
w h 宽 高
-->
<!--
相对路径:
上一级路径不表示方式 ../
绝对路径: 不推荐使用
-->
<img src="./resource/images/okwu-athletics.jpg" title="这是一个广告" alt="这是一张图片" width="600" height="500"><br>
<!--超链接 a 标签
href 连接地址
-->
<a href="https://www.baidu.com">超链接</a>
<!--图像链接-->
<a href="https://www.baidu.com"><img src="./resource/images/header.jpg"></a>
<br>
<!--锚链接-->
<!--
可以从一个地方跳到指定地方
-->
<!--功能性链接-->
<a href="mailto:619046217@qq.com">发送邮件</a>
<!--
target :
_blank 打开新的网页
_self 本网页打开
-->
<a href="https://www.baidu.com" target="_blank">新网页打开百度</a>
<a href="https://www.baidu.com" target="_self">本网页打开百度</a>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form为表单标签-->
<!--action : 提交
action 提交地址
method 提交方式:post / get
-->
<!--注册页面-->
<!--
post 安全 效率低 能提交无限大文件
get 不安全 效率高 一次请求的文件量很少
-->
<form action="第一个网页.html" method="get">
<!--
type 类型
name 名字
id 泵重复,保证代码唯一
disabled 禁用文本框
-->
<p>用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" required></p>
<!--密码框 input type="password"-->
<p>密码:<input type="password" name="password" placeholder="请输入密码" required></p>
<p>
<!--文件域-->
<input type="file">
</p>
<p>
<!--单选框-->
<!--
name 绑定同一个组
-->
<!--
注意:
1.若是要提交,必须有name和value属性
2.name就是提交的键值对,value就是提交的信息
-->
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
<p>
<!--checkbox 多选框-->
<input type="checkbox" value="movie" name="hobby">看电影
<input type="checkbox" value="music" name="hobby">听歌
<input type="checkbox" value="road" name="hobby">压马路
</p>
<hr>
<!--下拉框-->
<!--checked 默认选中-->
<select name="列表名称">
<option value="选择的值1">1</option>
<option value="选择的值2" selected>2</option>
<option value="选择的值2">3</option>
</select>
<!--文本域-->
<p>
<textarea name="文本" id="" cols="30" rows="10" ></textarea>
</p>
<!--按钮-->
<input type="button" value="我的第一个button按钮">
<hr>
<!--邮箱-->
<!--
patten 正则表达式
-->
邮箱<input type="email" name="email" placeholder="请输入邮箱" pattern="/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g">
<br>
<!--url简单校验-->
URL<input type="url" name="url">
<br>
<!--数字的简单校验-->
数字<input type="number" name="num">
<!--滑块-->
<input type="range" name="range" value="30">
<br>
<!--搜索框-->
搜索框<input type="search" name="search" readonly>
<!--提交按钮 input type = submit-->
<!--submit默认文字是提交-->
<p><input type="submit" name="Button">
<!--重填按钮-->
<input type="reset" name="Button">
</p>
</form>
</body>
</html>