? ? ? ? HTML是一种超文本标记语言,使用固定的标签来完成网页的布局,HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。它不像java一样的有严密的逻辑结构,而是修修补补,什么地方用什么标签完全取决于现在页面上有什么东西,所以它是离散的,只是有着固定标签的语言.
? ? ? ??
一.常用的标签
块元素:在浏览器中独占一行的元素
-div:单纯的独占一行
-h1~h6:通常用来设置内容标题的(会加粗和字体的放大)
-p:通常用来设置段落内容的(每一个p标签之间会有一行空格,相当于段落换行)
行内元素:
-a:超链接(用来做页面跳转的)????
? ?
<a href="跳转页面.html" target="_self">跳转到B站页面</a> href属性:表示要跳转的页面的路径
href="#":表示补全语法以及回到页面的顶部
target属性:表示页面跳转的时候,是否新建一个浏览器窗口
-target="_blank":会新建一个浏览器窗口打开跳转页面
-target="_self":会在当前浏览器窗口打开跳转页面??? ??
? ? ? 注意:超链接除了设置页面的跳转之外,还可以用来设置锚点
? ? ?-如果设置锚点的话,必须通过超链接来设置,在要标记的地方
? ? ? 添加一个<a name="锚点名字">标记位置</a>,重点是添加一个name属性值,用来表示锚点的? ? ?名字
? ? ?-在浏览器的其他位置设置一个超链接用来跳转到锚点位置
? ? ? <a href="#锚点名字">跳转到标记位置</a>
<div><a href="" name="d"></a>我的第二个网页</div>
<a href="跳转页面.html" target="_self">跳转到B站页面</a>
<a href="#d">回到我的第二个网页标题处</a>-input:(可以是输入框,选项框,文件上传等等...)??????????
<input type="text" placeholder="填写用户名">? ? ? ?
type属性:
-type="text":表示输入框(不写默认就是text)
-placeholder属性:表示输入框的背景提示
-type="button":表示按钮
-type="radio":表示的是单选
-type="checkbox":表示的是多选单选框:
注意:如果几个单选选项想列为一组,那么必须给这一组的单选框中加入
相同的name属性值<input type="radio" name="sex">男
<input type="radio" name="sex">女多选框
注意:几个多选框想列为一组,也得和单选框一样,添加相同的name属性值 <input type="checkbox" name="first">A
<input type="checkbox" name="first">B
<input type="checkbox" name="first">C
<input type="checkbox" name="first">D-span:单纯的行内元素(通常用来设置比较短的内容或者特殊的图标等)
-img:用来设置图片的标签
? ? ? ? ??
<img src="1.jpg" alt="图片未找到"> src属性:用来设置图片的路径
alt属性:如果图片未找到,则会以alt中的内容来提示
br:换行标签
:相当于是一个空格键
form表单:form表单就是用来将前端输入框中填写的数据提交到后台(java代码)的
注意:通常是和value连用的,value属性用来设置输入框或者按钮中的值
<form action="跳转页面.html" method="get">
<input type="text" placeholder="填写用户名" name="user"><br>
<input type="password" placeholder="填写密码" name="pass">
<input type="submit">
<br>
<!--重置按钮,只能重置当前form表单中的输入框/选项框内容-->
<input type="reset">
</form>action属性:表示表单提交数据的路径
method属性:表示表单提交的方式-get提交:
-不安全(会将input组件中的数据在浏览器地址上直接显示)
-提交的数据量较小(4kb左右)
-post提交:
-安全
-提交的数据量较大(2-4M左右)二.列表
ul:无序列表
ol:有序列表
通常情况下是和li标签连用的
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!--自定义列表-->
<dl>
选项
<dd>11</dd>
<dd>22</dd>
<dd>22</dd>
</dl>/*去掉li标签的小黑点*/
list-style: none;三.表格
table标签:表示表格
通常是和th,td,tr连用的
th:表示表格中的标题行
tr:表示表格中的行
td:表示表格中的列直接在table标签中添加style属性,来设置样式
style="border: 1px solid red;background: yellow"
bgcolor等同于background-color:
align属性:设置表格的位置
cellspacing属性:设置线条中的空间
text-align:"center":文本内容水平居中
line-height:100px :表示垂直位置,基于100px来进行居中
合并行:rowspan
合并列:colspan <table style="text-align: center;line-height:20px"
border="1px" bgcolor="aqua" align="center" cellspacing="0px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">20</td>
<td colspan="2">90</td>
<!--<td>99</td>-->
</tr>
<tr>
<td>李四</td>
<!--<td>22</td>-->
<td>92</td>
<td>97</td>
</tr>
</table>四.行内元素和块级元素的切换
display:
-inline:将元素变成一个行内元素
-block:将元素变成一个块元素(显示隐藏元素)
-none:将元素隐藏五.浮动和内外边距
浮动:
正常的DIV是独占一行的,那么就像堆积木一样,每一行都有一个DIV,最上面是第一个(根据你写的DIV顺序),而经过float-left左浮动之后,变成了左边的第一个是第一个DIV,同理右浮动就是右边第一个是第一个DIV,下浮动就是下面第一个是第一个DIV.如下图
内外边距
每一个元素都可以看成是一个盒子的模型,有外边距(margin),盒子有厚度,也就是边框厚度(border),
有内边距(padding)
? ? ? ? ?
1.margin:0 0 0 20px;(后面的四个参数分别代表上右下左外边距)
设置圆角:
-可以设置百分比
-也可以设置像素值:例如30px
2.border-radius: 50%;3.水平居中
text-align: center;
4.垂直居中
line-height: 40px;六.鼠标变成别的形状
1.将鼠标变成手指形状
cursor: pointer;
2.将鼠标变成问号形状
cursor:help;
3.将鼠标变成等待加载状态
cursor:wait;????????