HTML基础(1)

        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:换行标签
&nbsp; :相当于是一个空格键

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;