一,HTML标签
--超链接标签:在网页中跳转的效果
<!-- 超链接标签a
href属性用来,跳转到指定的网址
target属性用来,指定打开方式(默认_self,新窗口_blank)
-->
<a href="https://www.baidu.com" target="_blank"> 百度一下 </a>
<ol>
<li> <a target="_blank" href="#"> 全国新冠疫苗接种剂次超7亿 </a> </li>
<li> <a target="_blank" href="#"> 美国公布首批疫苗全球分配计划 </a> </li>
</ol>
<!-- 锚定:使用a标签实现回到顶部 -->
<a name="top">我是顶部</a>
<h3>如何套取富婆的欢心</h3>
<h3>如何套取富婆的欢心</h3>
<h3>如何套取富婆的欢心</h3>
<a href="#top"> ^回到顶部 </a>
--input标签:实现在网页中输入不同类型的数据
<!-- input标签:类型很多,实现类各种类型的数据的输入 -->
<input type="text"/> <!-- 普通的文本-->
<input type="password"/> <!-- 密码-->
<input type="number"/> <!-- 纯数字-->
<input type="button" value="点我"/> <!-- 按钮-->
<input type="radio"/>北京 <!-- 单选-->
<input type="checkbox"/> Anglelababa <!-- 多选-->
<input type="week"/> <!-- 日期-->
<input type="submit"/> <!-- 提交按钮-->
<input type="email" /> <!-- 邮箱-->
<input type="date" /> <!-- 日期 年月日-->
--表格标签:实现在网页中插入一个表格
<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
--表单标签:form标签，专门用来向服务器提交数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- form表单用来给服务器发送数据,GET POST,默认是GET -->
<form>
<table border="1px" cellspacing="0" bgcolor="gainsboro">
<tr>
<td colspan="2"> <!-- 合并列 -->
<h2 align="center">注册表单</h2> <!-- 居中-->
</td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" placeholder="请输入用户名" name="username"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" placeholder="请输入密码" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" placeholder="请输入密码" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称：</td>
<td>
<input type="password" placeholder="请输入昵称" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="email" placeholder="请输入邮箱" name="email"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<!-- 性别想实现单选,name值必须一样, value等于几就向服务器几-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city"> <!-- 下拉框-->
<option value="1">北京</option> <!-- 下拉选项-->
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" />
<img src="a.jpg" />
<input type="button" value="点我换一张"/>
</td>
</tr>
<tr>
<td>自我描述：</td>
<td>
<textarea>
请输入描述信息...
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
--其他标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5</title>
</head>
<body>
<!-- 块元素 div p h1~h6 行内元素 span input a img-->
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<div>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</div>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<p>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</p>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<span>6月3日0-24时，全省新增本土确诊病例7例，广州报告6例，佛山报告1例；另有本土无症状感染者转确诊病例2例，广州报告。新增本土无症状感染者1例，广州报告。</span>
<!-- 插入音频文件 controls使用默认控件 source指定文件位置-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 插入视频 controls使用默认控件 source指定文件位置 loop循环播放-->
<video controls="controls" loop="loop">
<source src="b.mp4"></source>
</video>
</body>
</html>
--小票练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小票</title>
</head>
<body>
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>玉米肉松蛋饼<br/>1X--玉米肉松蛋饼<br/>1X--现磨豆浆</td>
<td>8.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>合计</td>
<td>8.0</td>
</tr>
<tr>
<td>微支付</td>
<td>8.0</td>
</tr>
</table>
<hr />
<div>打印时间：2018-04-17 07:24:23</div>
<hr />
<div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整.</div>
</body>
</html>
--总结
h1~h6是标题标签
table表格标签 tr行 td列
input输入标签
div/span/p 段落标签
img/video/audio 图片/视频/音频标签
a 超链接标签
width宽度 height高度 bgcolor背景色 border边框 cellspacing单元格距离
align位置 colspan合并列 rowspan合并行 ...
二,CSS
--1,概述
专门用来修饰网页的效果的,样式表stylesheet
--2,语法
选择器{ 修饰的效果 }
body{ width:800px; bgcolor:red; }
--3,使用的位置
--第一种是在 HTML 的标签里使用 style属性
<div style="color:red ; font-size:50px; ">测试 css的样式 </div>
--第二种是在 head 的标签里使用 style标签
<head>
<meta charset="utf-8">
<title>css修饰网页</title>
<!-- style标签是html提供的 -->
<style>
/* 这个是css的注释 */
/* 语法: 选择器{ 效果 } */
span{
color:green ; /* 设置字的颜色*/
font-size: 30px;
}
</style>
</head>
--第三种是在 head 的标签里使用 link标签引入一个css文件
--先创建一个css文件:右键-新建css文件
p{ /*选中网页中的p元素设置效果*/
color:deeppink;
font-weight: 200;
}
--在html里引入css:
<!-- 引入一个css文件 rel用来指定文件的类型是固定值 href用来指定文件的位置-->
<link rel="stylesheet" href="html7.css"/>
--HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css修饰网页</title>
<!-- 引入一个css文件 rel用来指定文件的类型是固定值 href用来指定文件的位置-->
<link rel="stylesheet" href="html7.css"/>
<!-- style标签是html提供的 -->
<style>
/* 这个是css的注释 */
/* 语法: 选择器{ 效果 } */
span{
color:green ; /* 设置字的颜色*/
font-size: 30px;
}
</style>
</head>
<body>
<div style="color:red ; font-size:50px; ">测试 css的样式 的第1种写法</div>
<span>测试 css的样式的第2种写法</span>
<span>测试 css的样式的第2种写法</span>
<span>测试 css的样式的第2种写法</span>
<p>测试 css的样式的第3种写法</p>
</body>
</html>
--CSS代码
p{
color:deeppink;
font-weight: bold;
}
--4,选择器:选中网页中的指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<!-- 在html中加css代码 -->
<style>
/*1. 标签名选择器,选中标签是body的元素 */
body{
width: 300px; /* 设置网页的宽度*/
}
/*2. 标签名选择器,选中标签是div的元素 */
div{
background-color: #008000; /* 背景色*/
}
/*3. class选择器:给指定元素加class属性+通过.获取class的值 */
.a{ /* 获取了网页里class=a的元素*/
background-color: #FF1493;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<span class="a">我是span3</span>
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<a href="#">我是a1</a>
<a href="#">我是a2</a>
</body>
</html>
--5,属性
--作业:练习html4.html文件,敲三遍
扩展:
--1,form表单提交数据的两种方式:
--收集用户在网页中填写的信息,发送给服务器
--get方式:数据都在地址栏展示,不安全,有大小的限制
--http://127.0.0.1:8848/cgb2104/html4.html?username=jack&pwd=123
--如果想要提交数据,必须给标签配置 name属性
--username是网页中 name属性的值
--jack 是网页中 用户输入的值
-post方式:看不到数据,安全,没有大小限制
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
