Html第一周学习总结-CSDN博客

本文链接：https://blog.csdn.net/zqb960924/article/details/127458122

Html的定义

Html是一种超文本“标记”语言；可以针对文本，图片，动画文档等进行标记，例如（设置图片大小、设置字体颜色等…）

Html的标准结构

<html>                      是根标签         
		<head> 是头标签             
				<title>是标题标签</title>         
		</head>  
		 <body>  中的内容浏览器中显示的主体部分                     
		 </body>   
</html>

前端开发工具

为了提高书写代码的执行效率,前端的开发工具:HBuilder或者是HBuilerX工具都可以/ vscode/webstrom

常用的文本标签

1、注释快捷键方式：ctrl+shift+/，或者ctrl+/
2、标题标签：h1-h6从大到小的标签

<h1>今天天气不错!</h1>
<h2>今天天气不错!</h2>
<h3>今天天气不错!</h3>
<h4>今天天气不错!</h4>
<h5>今天天气不错!</h5>
<h6>今天天气不错!</h6>

3、水平线标签（分割标签）

<hr/>

4、段落标签，p标签，在插入段落标签的时候,前后会给我们加入空行

<p>1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。</p>
<p>1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。</p>

5、换行标签
没有开始标签,它会在浏览器中标记一个空行

今天天气不错!<br/>今天天气适合跑步! <br/>

6、常见的一些文本格式化标签 :i标签,b标签,strong标签,em标签，blockquote标签
b和strong的区别
和共同点:都是加粗的意思,对某段文本内容进行加粗标记
不同点:如果没有语义上的一种强调
那么就去使用b标签(通用加粗标签:使用b 标签)
如果有语义上的一种强调
那么就使用strong
i标签和em的区别:
共同点:都是标记斜体标签
不同点:如果没有语义强调就使用i标签(通用斜体标记)
如果有语义强调,使用em标签

<b>我爱我的祖国</b>
<strong>我爱我的祖国</strong><br/>
<b><i>卡塔尔世界杯</i></b> <!-- 斜体标记 同时加粗-->
<em>卡塔尔世界杯</em>
<!-- 引用标签 短引用,q元素 被引入的元素加入引号 -->
<p>我的女神:<q>XXX</q></p>
<!-- 引用标签 长引用 blockquote,将它包括内容进行"缩进"处理 类似于
键盘上tab键效果一样-->
<p>女神XXX</p>

blockquote标签，引用标签长引用 blockquote,将它包括内容进行"缩进"处理类似于键盘上tab键效果一样

<blockquote>
XXX，原名XXX，1979年10月5日出生于北京市丰台区，祖籍河北唐山
</blockquote>

文本标签之列表标签

1、无序列表 ul 和li
ul是父标签
li是列表项(子标签)
ul标签默认的属性
type:给列表项前面的标记值(默认disc,实习圆点) 不写就是默认值
circle:空心圆点
square:实心的小正方形

<ul type="square">
<li>c罗</li>
<li>XXX</li>
<li>AAA</li>
<li>CCC</li>
</ul>
<hr/>

2、有序列表
ol和li
li是ol子标签,列表项元素
ol的默认属性type,默认值值1
其他的值 A,a,I,i

<p>用户管理</p>
<ol type="1">
<li>添加用户</li>
<li>查询所有用户</li>
<li>修改用用户</li>
<li>删除用户</li>
</ol>

3、自定义列表
自定义列表以 dl 标签开始。
每个自定义列表项以 dt开始。
每个自定义列表项的定义以 dd开始

<dl><!-- 定义列表 -->
<!-- 自定义列表项-->
<dt>Java攻城狮</dt>
<!-- 具体项 的定义使用dd -->
<dd>Java攻城狮1号</dd>
<dd>Java攻城狮2号</dd>
<dd>Java攻城狮3号</dd>
<dt>测试攻城狮</dt>
<dd>测试攻城狮1号</dd>
<dd>测试攻城狮2号</dd>
<dd>测试攻城狮3号</dd>
<dt>前端攻城狮</dt>
<dd>前端攻城狮1号</dd>
<dd>前端攻城狮2号</dd>
<dd>前端攻城狮3号</dd>
<dt>运维攻城狮</dt>
<dd>运维攻城狮1号</dd>
<dd>运维攻城狮2号</dd>
<dd>运维攻城狮3号</dd>
</dl>

文本标签之滚动标签

滚动标签 marquee
属性:
背景色bgcolor
behavior:滚动的方式默认值scroll :连续滚动
滑动一次到浏览器边框停止掉 slide
alternate:来回滚动
direction:滚动的方式 :默认属性值 left(从右到左)
right:(从左到右)
up
down
scrollamount 表示运动速度，值是正整数 ,默认值是6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒

<marquee direction="right"
scrollamount="10"
scrolldelay="0"
behavior="alternate"
bgcolor="deeppink">滚动起来</marquee>

文本标签之块元素 div标签、span标签、pre标签

div和span有什么区别?
div:块元素,占一行空间,多个div之间会自带换行效果
div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局
span:行内标签 ,不会像div元素一一;
处在同一行上的
span应用场景:前端完成表单校验去做的;
举例: 用户在输入用户名之后,后面会有提示信息
使用span标签动态完成文本内容的设置

<div>今天天气很好</div>
<div>今天天气很好</div>
<span>今天天气不错!</span>
<span>今天天气不错!</span>

pre 原样输出标签；将我们写的文本内容使用pre包裹起来,
运行时会保留我们书写的格式。

	<pre>
神说：	
要有光；
世界便有了光
	</pre>

Html中常用的转义字符

&nbsp; 相当于在敲了一个空格 (代表一个空格)
&ensp; 相当于两个空格
&gt; 在浏览器将 ">"进行转义
&lt; “<” 进行转义
网站底部会有些版权所有或者注册商品的符号使用转义字符的
版权所有 &copy; 转义成 ©
注册商标 &reg; 转义成 ®
上下标标签 sup和sub

密&nbsp;码<br/>
密&ensp;码<br/>
&lt; hello &gt;
xxx公司2022-2023<sup>&copy;</sup> 注册商标<sup>&reg;</sup>
X<sup>2</sup> <br/>
H<sub>2</sub>O

超链接标签

a标签来表示
通过使用 href 属性 - 创建指向另一个文档的链接
href=“url” url 称为 “网络资源定位符号”
可以使用本地地址也可以是网络地址
target:打开资源地址的方式
默认打开方式：_self（当前窗口直接打开新地址）
_blank :新建一个窗口打开
超链接的第二种用法:
通过使用 name 属性 - 创建文档内的书签
作为"锚链接来使用"
在同一个html下
1)打锚点—(创建一个锚点(标记/书签))
name="锚点名称”
2)创建跳转链接(需要从某个位置跳转到上面的锚点位置)

<a href="#锚点名称">跳转到锚点</a>

在不同页面下进行锚点跳转
1)在另一个页面的某个位置
打锚点—(创建一个锚点(标记/书签))

<a name="锚点名称"></a>

2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置

<a href="文件地址#锚点名称">跳转到锚点</a>

使用：

<body>
		<a name="top"></a>顶部在这<br/>
		<a href="#foot">跳转到底部</a><br/>
		<a target="_blank" href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%D7%D4%C5%C4&fr=ala&ala=1&alatpl=normal&pos=0&dyTabStr=MCwzLDIsMSw3LDUsNCw4LDYsOQ%3D%3D">点击——查看美女</a>
		<br/>
		<a target="_top" href="http://127.0.0.1:8848/%E7%AC%AC%E4%B8%80%E4%B8%AAhtml%E9%A1%B9%E7%9B%AE/%E6%BB%9A%E5%8A%A8%E6%96%87%E6%9C%AC.html">点击跳转</a>
	<p>ava是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>
	<a name="foot"></a>底部在这<br/>
	<a href="#top">跳转顶部</a><br/>
	</body>

给页面上设置背景图片,background标签

body 里面加入属性background=“图像地址”
如果图像本身的尺寸没有电脑分辨率那么大,这个图片会X轴/y轴重复

<body background="img/jpg/bg.jpg">
<p>年轻就要醒着拼</p>

表格标签

表格表格:使用table表示
下面有子标签
tr:行
属性:align:将td中的内容进行对齐方式
行的子标签
caption:给表格中设置标题
td:一行指定的单元格 (普通单元格)
th:给单元格设置表头信息(自动居中加粗效果)
按照上面的信息写了表格,但是没有表格格式出现
table里面有一些属性
border:表格边框线单位为像素大小(指定1-5px,值越大,边框线越粗)
cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
width和height:宽度和高度像素大小或者占整个分辨率的百分比
align:给表格设置对齐方式 center 中间对齐
bgcolor:设置背景颜色

<body>
<table border="1px" align="center" bgcolor="pink" cellspacing="0" width="500px" height="400px">
<!-- font字体标签 color颜色属性 -->
<caption><font color="red">学生信息</font></caption>
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生住址</th>
<th>操作</th>
</tr>
<tr align="center">
<td>1</td>
<td>XXX</td>
<td>43</td>
<td>女</td>
</table>
</body>

表格单元格合并

单元格合并
td标签的属性
rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
colspan:列合并(合并列) 你当前这个单元格列合并所占的格子数量
单元格合并之后需要注释掉已被占用的单元格

<tr align="center">
<td>1</td>
<td>xxx</td>
<td>44</td>
<!-- 合并行 指定单元格格子数量 -->
<td rowspan="2">女</td>
<td>XXX</td>
<td>XX</td>
</tr>
<tr align="center">
<td>2</td>
<td>xxx</td>
<td>30</td>
<!-- <td>女</td> -->
<td>XXX</td>
<td>XX</td>
</tr>

面试题 get和post有什么区别?

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来说不会将信息提交地址栏上,所以提交数据大小无限制的!

HTML标签之表单标签_里面面试题

表单标签 form
属性:action=“url服务器地址”
method=“提交方式”
两种:
get/post(默认提交方式就是get:在浏览器直接输入访问地址都是默认get提交)

<input type="text" /> 文本输入框
<input type="password" /> 密码输入框
<input type="submit"/>特殊按钮

提交按钮将用户表单中的所有的表单项的内容提交到url地址上,进行服务器校验
placeholder h5的新增属性:提示信息
自带一种效果:当鼠标点击进去写内容时候,提示文字消失了
value:设置输入框的默认值没有上面的那种效果

表单项的所有标签都需要加上name属性 (必填)
给后端服务器程序标记用户输入的内容值是什么

常见的表单标签的表单元素(表单项)

表单标签中的元素
都需要必填name属性=“值” ,服务器地址就能够知道了用户输入的信息是什么
输入类型元素input
属性:
type=“text” 文本输入框
type=“password” 密码输入框
type=“radio” 单项按钮
type=“checkbox” 复选框
type=“date” 日期组件
type=“Ũ le” 文件上传组件
type=“button” 普通按钮结合value去使用 ,给按钮默认值
type=“submit” 结合value属性=“登录/注册” 特殊的提交按钮,将用户的信息提交到了action=“服务器地
址”
type=“reset” 重置按钮
type=“hidden” 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
子标签 option:下拉选项
文本域:textarea
rows:指定书写的行数
cols:一行有多个字符

框架标签

frame，一个frame代表一个html标签
框架集标签：
frameset由两个或者多个html标签组成
rows:水平方向(由上而下划分)每一个部分占整个部分权重百分比
cols:垂直方向(由左而右划分)每一个部分占整个部分权重百分比
在这里插入图片描述框架标签示意图
注意事项:
当点击左边菜单页的超链接 ,a标签的target属性指定在具体frame中打开,和frame中的name属性值一致即可!

CSS入门以及使用方式

CSS:Cascading Style Sheet 层叠样式表使用方式
方式1:在html标签中指定style属性 (行内样式):仅仅某个局部位置给某个标签单独设置的时候,直接用这种方式
style=“样式属性名称1:值1;样式属性名称2:值2;…”
弊端:一次只能修饰一个标签
方式2:内部方式(内联样式)
在head标签体中

<style>
CSS选择器{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
<style>
好处:优于第一种方式;一次可以控制多个标签
弊端:css代码和html标签混合到一块,不利于维护管理

方式3:外部方式(外联样式)
在web项目下:根目录创建一个css文件夹,创建一个 xx.css文件
css文件中书写css代码

CSS选择器{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
在当前页面中,导入指定的css文件
<link href="引入xx.css文件" rel="stylesheet"/>

CSS常用选择器

最基础的选择器
标签名称选择器；
class类选择器；
id选择器；
优先级:
id选择器>class类选择器>标签选择器
其它选择器
其他选择器:
并集选择器(同时选中多个标签设置样式)
选择器1,选择器2,选择器3…{
样式属性名称1:值1;
样式属性名称2:值2;
…
}
子元素选择器(给选择器2标记的标签一定选择器1标记的标签的子标签设置样式)
选择器1 选择器2{
样式属性名称1:值1;
样式属性名称2:值2;
…
}
后代选择器: (选择器2一定是选择器1标记标签的后代元素)
选择器1 > 选择器2{
样式属性名称1:值1;
样式属性名称2:值2;
…
}

CSS特殊选择器（伪类选择器）

伪类用于定义元素的特殊状态
状态:
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>CSS里面伪类选择器</title>
<style>
/*1)link状态:鼠标未访问状态*/
a:link{
font-size: 30px;
color:red;
}
/* 4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了) */
a:visited{
font-size: 40px;
/* 字体类型 */
font-family:"楷体" ;
color: darkgray;
/* 去掉下划线 */
text-decoration: none;
}
/* 2)hover状态(使用居多):鼠标经过状态 */
a:hover{
font-size: 35px;
2. CSS中常用的样式属性
2.1 CSS文本样式
color: green;
/*文本修饰:去掉超链接下划线*/
text-decoration: none;
}
/*3) avtive状态:鼠标获取焦点状态
(激活,点击了,但是没有松开),超链接就是这种*/
a:active{
font-size: 30px;
color: royalblue;
/*加入下划线*/
text-decoration: underline;
}
</style>
</head>
<body>
<a href="02_常用的css选择器.html">点我试试</a>
</body>
</html>

CSS常用的文本样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文本样式</title>
<style>
div{
/*文本颜色 color*/
color: red;
/* 文本对齐样式 text-align
left center right
*/
text-align: center;
/* 文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
*/
text-decoration:underline;
}
p{
3. Java(重点--目的学习JavaEE)中---软件开发工具包jdk(安装一下
jdk)
Jdk
卸载JDK
/* text-transform:文本转换 (了解)
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
*/
text-transform: capitalize;
text-align: left;
text-decoration: none;
color: blue;
/* text-indent:文本缩进 */
text-indent: 15px;
/*letter-spacing:指定文本中字符之间的间距。 */
letter-spacing: 10px;
/* 文本阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)
后面添加文本颜色
*/
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<div>今天是2022年10月21日</div>
<p>hello World</p>
</body>
</html>