HTML基本知识

1.标签

1.<br>：换行标签，是一个单标签。一个<br>代表空一行

2.<hr>：设置水平线（默认水平居中于网页）

  • size：设置水平线高度
  • width：设置水平线宽度
  • ailgn：设置水平线的位置  （left、center（默认）、right）

3.<sub></sub>：设置下标

eg： log<sub>10</sub>2

html5设置水平线左对齐 html水平线怎么调位置_web

<sup></sup>：设置上标

eg：20<sup>2</sup>

html5设置水平线左对齐 html水平线怎么调位置_私有属性_02

4.字体大小改变，依次递减

<h1></h1>、<h2></h2>、<h3></h3>

<h4></h4>、<h5></h5>、<h6></h6>

               

html5设置水平线左对齐 html水平线怎么调位置_html_03

5.  a: 超链接（ 有一定的跳转动作）

a标签生成的链接，未被访问时，字体颜色为蓝色；

点击访问时，为红色；访问结束回到当前页面时，字体颜色为紫色。

eg：  

<a href="http://www.baidu.com">百度一下你就知道</a>

html5设置水平线左对齐 html水平线怎么调位置_html5设置水平线左对齐_04

        

html5设置水平线左对齐 html水平线怎么调位置_私有属性_05

  • href：设置链接地址

1.标准url：绝对路径/相对路径

eg：

<a href="http://www.baidu.com">百度一下你就知道</a>

2.设置锚点值     （形象记忆：就好比蜘蛛侠吐丝来定点位置）

  • 通过id属性设定锚点位置
  • #id属性值

eg：

点击“第一章”会定位到“第一章内容------”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <a href="#one">第一章</a>
    </div>
<div>
        <a href="#two">第二章</a>
    </div>
    <div>
        <a href="#three">第三章</a>
    </div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="one">第一章内容------</p>
<br>
<br>
11111111
<br>
<br>
<p id="two">第二章内容------</p>
<br>
<br>
2222222222
<br>
<br>
<p id="three">第三章内容------</p>
<br>
<br>
333333333333
<br>
<br>

</body>
</html>

3.邮箱地址

  • mailto：邮箱地址
  • target：设置页面打开方式

_blank：打开新的页面

_self：在当前页面中打开（默认）

_top：在顶级框架中打开

_parent：在父框架中打开

6.table：用来写表格的

  • 子标签

<caption>：用来设置表格的标题信息

thead：设置表格头部 ，包含了<tr>、<td>

tbody：设置表格体部，包含了很多<tr>

tfoot：设置表格脚部，包含了对表格的总结信息

tr：表示表格的行，一对<tr>表示一行（存在于thead或tfoot任何一个中，但省略上述thead或tfoot，tr的父标签默认为tbody）

td：普通单元格，表示表格用来包含数据的单元格

th：常用于表头单元格，th单元格内的内容有剧中加粗的效果

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    
    td,th{
        width: 100px;
        height: 30px;
        border: 1px solid black;
       
    }</style>


</head>
<body>
<table align="center"  cellpadding="0px" cellspacing="0px">
    <caption>学生管理系统</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>班级</th>
    </tr>
    
    <tr>
        <td>rose</td>
        <td>22</td>
        <td>女</td>
        <td>web2101</td>
       </tr>
</table>

页面展示：

html5设置水平线左对齐 html水平线怎么调位置_html5_06

  • table私有属性  （后期学习完css不建议使用）

align：表格应该如何在文档中对齐

  • left  、center、right

cellpadding：设定内容与单元格之间的距离

cellspacing：表格与表格之间的间距 （设定单元格与单元格之间的距离）

bgcolor：设定表格的背景颜色

width：设定表格的宽度

border：设定表格边框特性，取整数为值，单位为px

（注：所有效果以实际测试为准）

  • td私有属性：

colspan：跨列数合并

rowspan：跨行数合并

width：设定单元格与单元格之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
           border-collapse: collapse;
        }
        
        td,th{
            width: 100px;
            height: 50px;
            border: 1px solid black;
           
        }</style>


</head>
<body>
    <div class="text" style="text-align:center;">    
    <h1>例如</h1>  </div>
  <br>
    <table align="center"  cellpadding="0px" cellspacing="0px" style="text-align: center;">
        <caption></caption>
<tr>
    <td rowspan="2">联系方式</td>
    <td>移动电话</td>
    <td></td>
    <td>现在住址</td>
    <td></td>
    <td>邮编</td>
    <td></td>
</tr>
<tr>
   
    <td>紧急联系人</td>
    <td></td>
    <td>与本人关系</td>
    <td></td>
    <td>联系电话</td>
    <td></td>
</tr>

   </table>




</body>
</html>

页面展示：

html5设置水平线左对齐 html水平线怎么调位置_web_07

colgroup： 写在所有tr之上，在它里面可以通过col标签标识列   （定义一个表中的一组列，只能作为table的子元素，位于元素后，其他元素之前。）

  • col：定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为<colgroup>元素的子元素
  • col的私有属性： span ----->设置col控制几列 (跨列数，即规定有几列可以作为同一列)
  • H5中新增标签
  • header
  • 是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
  • nav
  • 是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
  • article
  • 代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。