HTML第一课
HTML基础
超文本"标记"语言(Hyper Text Markup Language)
可以针对文本，图片，动画，文档都可以标记
HTML的标准结构
访问网站–>通过右键F12–>检查元素
<!DOCYTPE html> html.文档声明(默认h5文档类型 还有h 4.0.1版本)
根标签
头标签
浏览器主体
HBuilder的使用
- 创建项目（两种方法）
2.创建html文件
3.文件创建成功
HTML
1.锚点的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top">这是顶部</a>
<a href="#foot">跳转底部</a>
<p>勇士队普尔以及格林内讧的事情随着普尔获得提前续约算是告一段落。早些时候，普尔在接受采访时首度回应了他与格林的冲突，
他表示格林已经向他道歉，并且他们将会以专业的方式继续处理彼此之间的关系。虽然说勇士休赛期最大的问题得到了解决，
他们也将以相对完整的夺冠阵容去冲击新赛季的总冠军，但是球队依旧面临着问题，
而这个问题到明年夏天会进一步显现。</p>
<p>随着勇士队官宣续约普尔（4年1.4亿美元）以及威金斯（4年1.09亿美元），勇士在23~24赛季的薪资已经爆表，他们12人大名单的薪资将达到
2.15亿美元，而他们要缴纳的奢侈税则高达2.68亿美元，这也就意味着如果在明年夏天格林以及迪温琴佐选择执行球员选项，那么勇士队将面临着巨额的薪资奢侈税，
如果勇士球队满员的话他们的薪资+奢侈税将突破5亿美元。</p>
<p>格林此前曾索要顶薪提前续约合同，明年夏天格林是否会跳出合同，寻求一份顶薪的续约还是未知。对此美媒体Heavy认为勇士在明年夏天可以选择先签后换格林，
并且给出了一笔2换2的交易方案。勇士2换2交易方案出炉，勇士送走格林，年轻扣将联手库里冲冠。
具体的交易方案为勇士送走格林以及迪温琴佐与掘金达成交易，得到掘金的戈登以及波普。</p>
<a name="foot">底部在这里</a>
<a href="#top">顶部</a>
<a href="文本标签_列表标签.html#gaoyy">高圆圆</a><br>
</body>
</html>
2.文本滚动标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签_滚动标签</title>
</head>
<body>
<!-- 滚动标签 marquee
属性：
backgroundcolor：背景颜色
behavior:滚动方式(slide:滚到边框停掉，scroll:连续滚动，alternate:来回滚动)
direction:滚动方式(默认属性left:从右到左 right:从左到右，up，down)
scrollamount:滚动速度
scrolldelay:滚动停顿(默认0)
-->
<marquee scrollamount="15" bgcolor="deeppink" behavior="alternate" scrolldelay="0"> 詹姆斯永远的神</marquee>
</body>
</html>
3.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签_列表标签</title>
</head>
<body>
<p>你喜欢的明星？</p>
<!-- 列表标签
无序列表ul
ul标签的默认属性
ul父标签
li列标项(子标签)
type：disc(默认，实心圆) circle 空心圆 suqre(实心小正方形)
-->
<ul type="circle">
<li>詹姆斯</li>
<li>库里</li>
<li>字母菇</li>
</ul>
<hr /><!-- 水平线 -->
<!-- ol和li
li是ol的子标签，列表项元素
ol的默认属性是type (1) A和a I和i
-->
用户管理
<ol type="A">
<li>添加</li>
<li>修改</li>
<li>删除</li>
</ol>
<!-- 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。-->
<p>项目组人员构成</p>
<dl>
<dt>土狗天团</dt>
<dd>土狗01</dd>
<dd>土狗02</dd>
<dd>土狗03</dd>
<dt>项目攻城狮</dt>
<dd>攻城狮01</dd>
<dd>攻城狮02</dd>
<dd>攻城狮03</dd>
<dt>运维攻城狮</dt>
<dd>运维攻城狮01</dd>
<dd>运维攻城狮02</dd>
<dd>运维攻城狮03</dd>
</dl>
<a name="gaoyy">高圆圆</a>
</body>
</html>
4.文本标签_块元素以及特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签之块元素</title>
</head>
<body>
<!--
div和span有什么区别
div:块元素，占一行空间，多个div之间带有换行效果
div应用场景:结合css(给html标签进行修饰)，完成层级页面布局
span:行内标签，不会像div元素，处在同一行上
前端完成表单校验
表单校验用户输入用户信息的时候，标签动态设置文本内容。
-->
<div>程序员</div>
<div>投二分</div>
<span>不打了</span>
<span>不管打不打？</span>
<hr />
<!-- pre原样输出标签
浏览器当做普通文本，不换行
-->
<pre>
public void class(){
public static void main(Strin[] args){
System.out.print();
}
}
</pre>
<!-- 转义字符:
相当于一个空格
$nesp;相当于两个空格
> >转义
< <转义
网站底部版权所有注册商标，使用转义字符
版权所有:© 注册商标:®
-->
姓 名:<br />
姓 名:
1>0 2<1<br />
版权所有©
注册商标®<br />
<!-- 上下标 sup和sub -->
X<sup>2</sup>
H<sub>2</sub>O
</body>
</html>
5.图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
<!--
<img src="url"/>
stc:连接到图片的地址url(统一字符定位符)
src:使用相对路径
相对路径:在当前这个web项目下的路径
绝对路径:磁盘路径
width:宽度
height:高度
可以指定像素px(当前在计算机的某个点)，还可以指定百分比(根据图片分辨率)
图像设置的时候，本身就和图片尺寸有关系
title:当鼠标悬浮在图片上显示的文字提示
alt:替代文本:当图片的链接失效了，显示文本
-->
</head>
<body>
<!-- ../回退上一级mul -->
<a href="06_附件.html">
<img src="male.jpeg" width="1210px" height="710px"/>
</a>
</body>
</html>
6.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格标签</title>
<!-- 表格表格:使用table表示
下面有子标签
tr:行
属性:align:将td中的内容进行对齐方式
行的子标签
td:一行指定的单元格 (普通单元格)
th:给单元格设置表头信息(自动居中加粗效果)
按照上面的信息写了表格,但是没有表格格式出现
table里面有一些属性
border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)
cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
width和height:宽度和高度 像素大小或者占整个分辨率的百分比
align:给表格设置对齐方式 center 中间对齐
-->
</head>
<body>
<table border="1" cellpadding="2px" cellspacing="0" width="500px" height="400px" align="center">
<caption>学生信息</caption>
<tr align="center">
<th>学生学号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生住址</th>
</tr>
<tr align="center">
<td>1</td>
<td>高圆圆</td>
<td>43</td>
<td>女</td>
<td>北京市</td>
</tr>
<tr align="center">
<td>2</td>
<td>高祥祥</td>
<td>23</td>
<td>男</td>
<td>太原市</td>
</tr>
<tr align="center">
<td>3</td>
<td>屈嘉尧</td>
<td>23</td>
<td>男</td>
<td>宝鸡市</td>
</tr>
</table>
</body>
</html>
7.合并表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 单元格合并td标签的属性
rowspan:合并单元行
colspan:合并单元列
-->
<body>
<table border="1" cellpadding="2px" cellspacing="0" width="500px" height="400px" align="center">
<caption>学生信息</caption>
<tr align="center">
<th>学生学号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生住址</th>
</tr>
<tr align="center">
<td>1</td>
<td>高圆圆</td>
<td>43</td>
<td>女</td>
<td>北京市</td>
</tr>
<tr align="center">
<td>2</td>
<td>高祥祥</td>
<td>23</td>
<td rowspan="2">男</td>
<td>太原市</td>
</tr>
<tr align="center">
<td>3</td>
<td>屈嘉尧</td>
<td>23</td>
<td>宝鸡市</td>
</tr>
</table>
</body>
</html>
8.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04常用表单标签的表单项</title>
</head>
<!--
表单标签 form
属性:action="url服务器地址"
method="提交方式"
两种:
get/post(默认提交方式就是get:在浏览器直接输入访问地址都是默认get提交)
<input type="text" /> 文本输入框
<input type="password" /> 密码输入框
<input type="submit"/>特殊按钮
提交按钮将用户表单中的所有的表单项的内容提交到url地址上,进行服务器校验
get提交和post提交有什么区别? (面试题)
get提交:
1)会将用户的信息提交到地址栏上
格式 是在action的url地址后面?表单项标签中name属性值1=输入的内容值1&name属性的属性值2=输入内容2...
2)get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密(Java中--MD5加密的工具))
3)get提交由于在地址栏上的,所以提交的数据大小有限制!
post提交:HbuilerX运行,提交,找不到地址
手动方式去运行这个页面(不要使用工具运行)
1)不会将用户信息提交到地址栏上
2)相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)
3)相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!
-->
<!--
表单标签中的元素
都需要必填name属性="值" ,服务器地址就能够知道了用户输入的信息是什么
输入类型元素input
属性:
type="text" 文本输入框
type="password" 密码输入框
type="radio" 单项按钮
type="checkbox" 复选框
type="date" 日期组件
type="file" 文件上传组件
type="button" 普通按钮 结合value去使用 ,给按钮默认值
type="submit" 结合value属性="登录/注册" 特殊的提交按钮,将用户的信息提交到了action="服务器地址"
type="reset" 重置按钮
type="hidden" 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
子标签 option:下拉选项
文本域:textarea
rows:指定书写的行数
cols:一行有多个字符
-->
<body>
<form action="02_html表格中单元格合并.html">
用户名:<input type="text" placeholder="请输入用户名" name="uname"/><br />
密  码:<input type="password" name="psw" placeholder="请输入密码"/><br />
<!--
看成同一组信息,指定相同的name属性,给后端标记,用户选的哪些
-->
性  别:<input type="radio" value="0" name="sex"/>男
<input type="radio" value="1" name="sex"/>女<br />
爱  好:<input type="checkbox" value="0" name="hobby"/>篮球
<input type="checkbox" value="1" name="hobby"/>羽毛球
<input type="checkbox" value="2" name="hobby"/>足球
<input type="checkbox" value="3" name="hobby"/>跑步<br />
出生日期:<input type="date" name="birthday"/><br />
籍  贯:
<select name="city">
<option value="请选择">请选择</option>
<option value="西安市">西安市</option>
<option value="汉中市">汉中市</option>
<option value="宝鸡市">宝鸡市</option>
<option value="安康市">安康市</option>
</select><br>
上传照片:
<input type="file" name="file"/><br />
自我介绍:
<textarea rows="5" name="texta" cols="20"></textarea><br />
<input type="button" value="普通按钮"/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="hidden" name="userid" value="9527"/><!-- 隐藏属性 -->
</form>
</body>
</html>
9.frame框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签</title>
<!--
cols:垂直方向，从左到右依次划分的每个部分占总权重的比重。
rows:水平方向，从前到后依次划分的每个部分占总权重的比重。
frame不能在body里面写，要么在body之前，要么删除body
-->
</head>
<frameset rows="30%,*,10%">
<frame src="01_logo.html"/>
<frameset cols="20%,*">
<frame src="01_左边菜单.html" />
<frame src="01_中间页面.html" name="main" />
</frameset>
<frame src="01_底部版权信息.html"/>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
</head>
<body>
<img src="img/logo.png" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左菜单</title>
<!--
a标签超链接
target:打开方式 _self:默认值在当前窗口打开
_blank:新建一个窗口打开
如果超链接需要在指定的框架的页面中打开
需要指定为target="框架标签的name属性值"
-->
</head>
<body>
<p>学生管理</p>
<ul>
<li><a href="01_学生信息.html" target="main">查询信息</a></li>
<li><a href="01_添加学生.html" target="main">查询信息</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中间页面</title>
</head>
<body>
<p>欢迎！！</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部版权信息</title>
</head>
<body>
<center>
<p>版权所有<sxp>©2022-2023</sxp></p>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加学生</title>
</head>
<body>
<form>
姓名:<input type="text" name="username" placeholder="请输入姓名"/><br />
班级:<input type="text" name="classroom" placeholder="请输入班级"/><br />
性别:<input type="radio" name="sex"/>男  <input type="radio" name="sex"/>男<br />
住址:<select name="place">
<option value="0">陕西</option>
<option value="1">山西</option>
<option value="2">四川</option>
</select><br />
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息</title>
</head>
<body>
<table border="1" bgcolor="aqua" cellpadding="0" cellspacing="10px" width="100%" height="500px">
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>籍贯</th>
<th>操作</th>
</tr>
<tr>
<td>祥子</td>
<td>25</td>
<td>男</td>
<td>山西</td>
<td><input type="button" name="but1" value="提交"/>
<input type="button" name="but2" value="修改"/>
</td>
</tr>
<tr>
<td>耀子</td>
<td>20</td>
<td>男</td>
<td>山西</td>
<td><input type="button" name="but1" value="提交"/>
<input type="button" name="but2" value="修改"/>
</td>
</tr>
<tr>
<td>伟哥</td>
<td>26</td>
<td>男</td>
<td>陕西</td>
<td><input type="button" name="but1" value="提交"/>
<input type="button" name="but2" value="修改"/>
</td>
</tr>
</table>
</body>
</html>
10.css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用css选择器</title>
<style>
p{
font-size: 40px;
color: blueviolet;
text-align: center;
text-decoration: underline;
}
#style01{
text-align: right;
text-decoration: blink;
color: #FF0000;
}
.div01
{
text-align: center;
color: antiquewhite;
}
</style>
</head>
<body>
<div id="style01">灰熊球星莫兰特参加NBATODAY节目，聊到了一些热门话题。他认为全联盟最难防的球员是库里，还表示最想在詹姆斯头上扣篮。</div>
<div style="color: red;font-size: 30px;font-family: 华文彩云; text-align: center; ">谈到自己对于新赛季的想法，莫兰特说道：“就我个人而言，当我准备好开战时，我并不在乎对手是谁。”</div>
<div><p>2021-22赛季，莫兰特场均27.4分5.7篮板6.7助攻，表现非常出色，生涯首次入选全明星，还成为了年度进步最快球员。</p></div>
<div class="div01">ESPN某著名记者在电视节目中谈到了湖人的交易前景。他表示，湖人真的缺乏球员交易资产，他们真正对其他球队有吸引力的资产就是2027年和2029年的无保护首轮选秀权。
他们将继续寻求的是将这些选秀权和威少即将到期的4700万美元合同打包，看看市场上会有哪些球员。</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css表/css样式.css" rel="stylesheet" />
<!-- <style>
div{
font-size: 40px;
color: chartreuse;
text-align: center;
;
}
h2{
font-size: 40px;
color: red;
text-align: center;
font-family: "宋体";
font-style: italic;
}
p{
text-align: right;
}
</style> -->
</head>
<body>
<h2>飞踢宇</h2>
<div>没有人可以让我<strong>宇将军</strong>在<i>投降书</i>上签字，因为我根本不识字。</div><br />
<p>---亚里士多宇•将军</p>
</body>
</html>
div{
font-size: 40px;
color: chartreuse;
text-align: center;
;
}
h2{
font-size: 40px;
color: red;
text-align: center;
font-family: "宋体";
font-style: italic;
}
p{
text-align: right;
}
/*前端三剑客
Html:理解"房屋的主体结构"
CSS :理解"具体的房屋里面加入修饰"
Js(Javascript):理解 "具体房屋里面的功能(前端自己的逻辑)"
js:变量,数据类型
CSS:Cascading Style Sheet:层叠样式表
我们自己书写的样式一定是系统里面有的样式(样式库规定的)
1.CSS使用方式第一种:行内样式
html的每一个标签都有style属性:设置样式的
style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."
弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接用这个方式)
2.CSS使用方式第二种:内联样式(内部样式)
在head标签体中书写
<style>
使用css选择器{ //可以直接是标签名称(标签选择器)
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
...
}
</style>
存在弊端:当前这个html只是写html标签元素的,样式代码style标签
和html标签元素混合了,不利于管理!(后端人员,这种方式够用了)
3.CSS使用方式3:
外联样式(外部样式)
前端开发人员:这种推荐,将css样式代码和html标签代码分离了
1)单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件
2) css文件书写
选择器{
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
...
}
3)在当前html页面中导入css文件
<link href="css文件地址" rel="stylesheet"/>
rel:关联样式库中的样式(关联层叠样式表):固定写法
*/
/*css注释 ctrl+/或者是ctrl+shift+/
css注释:注释不能嵌套
上课过程中,为了书写方便,使用的内部样式
常用的选择器
1.标签名称选择器{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
2 class选择器(类选择器)
需要在 你的标签指定class属性="值"
.class属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
同一个页面中的class属性值是可以同名的!
class(类)选择器 :同一类元素 优先级 > 标签名称选择器
3 id选择器
在标签中指定id="值",注意:id选择器的id的值,必须唯一的!
(id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;
#id属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
上面三个选择器是设置css的最基本选择器
id选择器 > class选择器 > 标签名称选择器
组合选择器
4 并集选择器
选择器1,选择器2,选择器3....{ 选择器可以是上面id,class类,标签名称选择器
样式属性名称1:值1;
样式属性名称2:值2;
....
}
5 子元素选择器
选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
样式属性名称1:值1;
样式属性名称2:值2;
....
}
6 后代选择器:
选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
样式属性名称1:值1;
样式属性名称2:值2;
....
}
优先级:
id选择器>class类选择器>标签选择器
*/
伪类用于定义元素的特殊状态
状态:
1)link状态:鼠标未访问状态
2)hover状态(使用居多):鼠标经过状态
3)avtive状态:鼠标获取焦点状态
(激活,点击了,但是没有松开),超链接就是这种
4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)
css代码书写格式:
选择器:状态名称{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
注意:
1)状态名称不区分大小写,但是建议小写
2)注意： 规定这个先后顺序: 才能出现循环的效果
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{
font-family: "宋体";
font-size: 40px;
color: grey;
text-decoration: underline;
}
a:visited{
font-size: 40px;
font-family:"楷体" ;
color: darkgray;
text-decoration: none;
}
a:hover{
text-decoration: line-through;
color: red;
}
a:active{
font-size: 60px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">点击我</a>
</body>
</html>
11.css文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文本样式</title>
<style>
/* text-transform:文本转换 (了解)
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
*/
p{
font-size: 60px;
color: skyblue;
/* 文本对齐方式 */
text-align: left;
/* 文本缩进 */
text-indent: 60px;
/*letter-spacing:指定文本中字符之间的间距。 */
letter-spacing: 20px;
/* 最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)后面添加文本颜色 */
text-shadow: 2px 2px red;
}
.textstyle{
text-transform: capitalize;
text-decoration: overline;
font-size: 50px;
text-align: center;
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>小林学java</p>
<div class="textstyle"> Our life is nothing more than our time. To kill time is therefore a form of suicide. We are shocked when we think of death, and we spare no pains, no trouble, and no expense to preserve life.</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
