1.HTML:
1)超文本标记语言,用来描述网页的一种语言。
2) HTML页面包括:HTML标签和文本内容
3)必须要明确HTML版本
4)<head></head
>标签内的内容不会出现在页面上
5)搜索引擎:
搜索引擎关键字
<meta name="keywords" content="青岛,前端">
搜索引擎描述
<meta name="descrption" content="小白学习,前端内容">
6)
<title></title>
标签内的内容出现在新标签页标题
7)<body></body>
标签内包含了所有页面可见的内容
2.HTML常用标签
2-1基本标签
1)标题标签
<h1></h1>
字体最大<h6></h6>
字体最小
2)段落标签
<p>内容</p>
内容前后隔开一段
3)换行标签<br>
4)水平线标签<hr>
划出一条水平线
2-2 字体格式标签(行级标签,不会自动换行)
1)粗体:
<b></b>
2)斜体:<i></i>
3)比普通文本更小的字体:<small></small>
4)删除字体:<del></del>
2-3 超链接
1) <a href ="网址">淘宝</a>
2)书签:
<div id="tips">提示内容</div>
<a href="#tips">跳到提示部分</a>
2-4图片
1)<img src ="img/gril.jpeg" title="图片说明" width="200px" heigh = "300px">
绝对路径:从项目根路径开始,根目录用/表示
相对路径:从当前文件开始,向上一级目录用 …/ 表示
eg:…/aaa…/aa…/a.txt
2-5列表
1)无序列表:
<ul>
<li>内容1</li/>
<li>内容2</li>
<li>内容3</li>
</ul>
2)有序列表
<ol>
<li>内容1</li/>
<li>内容2</li>
<li>内容3</li>
</ol>
2-6表格标签
border-边框属性,控制边框粗细,0-表示不显示边框
cellpadding 指定单元格内容与单元格边界之间的空白距离的大小
cellspacing 指定表格各单元格之间的空隙,参数值是数字,表示单元格间隙所占的像素点数
2-7表单标签
<form action="" method="">
form表单标签
action属性 表单数据的提交到后台服务的地址
method属性 比较表单的方式get/post
提交form表单,会刷新数据。当提交form表单时,会触发form的action事件。
用ajax提交请求,不会刷新页面
例如:
<form action="u?method=queryStaffList" method="POST">
//name属性,在servlet里面,用req.getParameter("id"),会得到标签的value值
<input type="text" name="id" placeholder="请输入工号" class="d">
<input type="text" name="staffName" placeholder="请输入员工姓名" class="d">
<button type="button" class="layui-btn" onclick="$('form').submit();">查询</button>
</form>
//点击查询按钮,提交form表单,触发queryStaffList方法
2-8 button按钮:
button的type默认是submit
1.当button里面有type属性时,无法自动提交事件,需要使用onclick提交form表单
<form action="s?method=listPage" method="POST>
<button type="button" class="layui-btn" onclick="$('form').submit();">查询</button>
</form>
2.当没有type属性时,默认button的type为submit,不需要onclick。使用button的默认type会导致页面自动刷新
<button >查询</button>
1)文本框
```html
<input type="" value="">
type类型:text文本框、password密码框
2)单选框、复选框
<input type="" name="" title="" value="">
type类型:radio单选框、checkbox复选框
其中,单选框和复选框的name属性必须相同才能控制单、双选
3)下拉框
select选项下的option无法触发onclick事件。可以在select里加onchange。
但是要注意相同的value值,无法触发onchange事件
<select>
<option selected="selected">内容1<option> <!--selected默认选择-->
<option>内容2<option>
<option>内容3<option>
</select>
示例:
原代码:在option中使用onclick
注意:function函数参数不要加数据类型,function方法间不要加;
select name="depart" lay-verify="required" class="d" onchange="jumpadd();">
<option value="">请选择部门</option>
<option id="d1" onclick="add(1)">研发部</option>
<option id="d2" onclick="add(2)">运维部</option>
</select>
function add(i) {
depart_click = i;
}
修改后:使用select的onchange事件
<select name="depart" lay-verify="required" class="d" onchange="jumpadd();">
<option value="">请选择部门</option>
<option id="d1" value="1">研发部</option>
<option id="d2" value="2">运维部</option>
</select>
function jumpadd() {//添加
add($("#s").val());
}
function add(i) {
depart_click = i;
}
4)文本域 textarea
<textarea maxlength="20"></textarea>
textarea文本域
maxlength限定文本域字数
disabled 禁用文本域
5)按钮
<input type="button" value="普通按钮"onclick="alter('123')"/>
<!--οnclick="alert('123')"指点击按钮,窗口返回123-->
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
<input type="hidden" value="隐藏框"/>
3.实体字符
< 等同于小于号<
">> 等同于大于号>
等同于空格
© 等同于©
4.div标签–用于页面分区
可以控制宽度width、高度weight、内边距padding、外边距margin
div标签的align属性:规定 div 元素中的内容的水平对齐方式。有left、right、center等值
align属性的效果等同于css样式的
5.框架标签frame
frameset标签不能和body标签同时使用
rows表示当前页面上下分区,cols表示当前页面左右分区
//表示当前页面按1:9上下分区,分区边界宽度为1
<frameset rows="10%,90%" border="1">
//src引入页面路径
//引入10%的页面
<frame src="frame_top.html">
//引入90%的页面
<frame src="frame_bottom.html">
</frame>
</frameset>
iframe:嵌套页面
<body>
<!-- 嵌套页面 -->
<!-- name属性,iframe标签的名字,用于指定其他链接跳转页面位置 -->
<!-- scrolling启用滚轮 auto自动 yes启用 no禁用 -->
<iframe src="https://www.bilibili.com/" name="main_page"
width="100%" height="425px" scrolling="auto">
</iframe>
</body>
frame示例
//分区页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="20%,80%" border="1">
<frame src="frame_top.html"/>
<frameset cols="10%,90%" border="3">
<frame src="frame_left.html" />
<frame src="frame_main.html" />
</frameset>
</frameset>
</html>
//frame_top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body></body>
</html>
//frame_left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>
<!-- 点击链接,在main_page页面(分区)显示内容 -->
<a href="https://www.jjwxc.net/" target="main_page">晋江</a>
</li>
<li>
<a href="https://www.xxsy.net/" target="main_page">潇湘</a>
</li>
<li>
<a href="https://www.hongxiu.com/" target="main_page">红袖</a>
</li>
</ol>
</body>
</html>
//frame_main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 指定本分区名为main_page,本分区展示页面为链接网站内容 -->
<iframe src="https://www.xxsy.net/" name="main_page" width="100%" height="600"></iframe>
</html>
示例
<!DOCTYPE html>
<!-- 明确HTML版本为HTML5版本,简称H5;只有明确版本,浏览器才能正确显示HTML页面 -->
<html><!-- HTML页面的根标签 -->
<!-- head标签包含HTML页面元数据, head标签中的信息不会显示在浏览器上 -->
<head>
<!-- 网页编码 -->
<meta charset="utf-8" />
<!-- 标题标签 -->
<title>H5基础标签</title>
<!-- 搜索引擎关键词-->
<meta name="keywords" content="前端,思途,青岛" />
<!-- 网站描述,涉及到SEO优化 -->
<meta name="description" content="思途前端学习" />
</head>
<!-- body标签包含了全部的页面可见的内容 -->
<body>
<div id="tips">提示部分</div>
1 基本标签
<h1>h1标题标签</h1>
<h6>h6标题标签</h6>
<p>p标签:段落标签,<br>块级标签,单独占一行</p>
<!-- 换行标签 -->
<br />
<!-- 水平线标签 -->
<hr />
2 文本格式标签:都是行级标签,不换行
<br>
<b>粗体标签</b>
你好
<i>斜体标签</i>
<small>比普通文本更小的字体</small>
<strong>等价于粗体</strong>
<br>
<del>删除字体,标记文本中间一条横线</del>
<hr>
3 超链接标签
<br>
<!--
href属性:指定超链接要跳转的地址
target属性:指定新页面的打开方式
_blank 在一个新的页面打开
_self(默认) 在当前页面打开
-->
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<a href="#tips">跳到提示部分</a>
<hr>
4 图片
<br>
<!-- img标签是行级元素,不会独占一行 -->
<!-- src是img标签的属性,表示图片文件的地址 -->
<!-- width-宽度属性 单位是像素-->
<!-- height-高度属性 单位是像素-->
<img src="img/ab.jpg" title="图片说明" width="200px" height="180px" />
<br>
<img src="https://img2.baidu.com/it/u=969746118,2322541383&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=434" width="300px" height="150px">
<!--
相对路径:从当前文件开始,向上一级目录用../表示
绝对路径:从项目根目录开始,根目录用/表示
-->
<hr>
5 列表
<!-- 无序列表 -->
<ul>
<li>aaa</li><!-- 列表的行标签 -->
<li>bbb</li>
<li>ccc</li>
</ul>
<!-- 有序表标签 -->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<hr>
6 表格标签
<!--
border属性:表示表格外边框粗细,0-不显示边框,1-边框粗细为1像素
cellspacing属性:表格各单元格之间的空隙,参数值是数字,表示单元格间隙所占的像素点数
-->
<table border="10" cellspacing="0">
<tr><!-- 行标签 -->
<!-- rowspan:纵向合并单元格 -->
<td rowspan="2">单元格1</td><!-- 单元格标签 -->
<!--
align: 控制标签包含的文本位置
left:居左
center:居中
right:局右
-->
<!-- colspan:横向合并单元格 -->
<td colspan="2" align="center">单元格2</td>
</tr>
<tr>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<hr>
7 表单
<form action="http://www.baidu.com">
<!--
文本框 type="text"
placeholder 解释说明
-->
<input type="text" placeholder="文本框">
<br>
<!-- 密码框 -->
<input type="password" placeholder="密码框" />
<br>
<!-- 单选框 type="radio" 单选框需要指定相同的name属性才能控制单选 -->
<input type="radio" name="sex" title="单选框" value="1"/>男
<input type="radio" name="sex" value="0" />女
<br>
<!-- 复选框 type="checkbox" 多个复选框标签的name属性相同,可以多选-->
<input type="checkbox" name="cb1" title="复选框1"/>北京
<input type="checkbox" name="cb1" title="复选框2"/>上海
<br>
<!-- 下拉框 -->
<select>
<option>济南</option>
<option selected="selected">青岛</option><!-- selected默认选中 -->
<option>烟台</option>
</select>
<!-- textarea文本域 -->
<!-- maxlength限定文本域字数 -->
<!-- disabled 禁用文本域 -->
<textarea maxlength="10" placeholder="文本域"></textarea>
<br>
<!-- 按钮 -->
<input type="button" value="普通按钮" onclick="alert('123')" >
<!--
提交按钮根据form标签的action属性,
将真的form表单中的元素的值提交给action属性指定的地址
-->
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<!-- 隐藏框,不在浏览器显示,用于缓存临时数据 -->
<input type="hidden" value="1" />
<hr>
© <
</form>
</body>
</html>