HTML5的基础知识点总结

1.<h1>一级标签</h1>

……

<h6>六级标签</h6>

2.<p>段落标签</p>

3.<br>换行标签<br/>空标记（强制换行）

4.<hr/>水平线（空标记）

5.<b>加粗内容</b>只是显示加粗
  <strong>强调的内容</strong>突出的文本

6.<em>强调文本</em>
  <i>倾斜</i>

7.<s>文本</s>删除线
  <del>文本</del>删除线

8.<u>文本</>下划线

9.上标
  下标

<hr color="green" width="600" align="right">   #水平线

#color======颜色
#width======宽度
#align======对齐方式
#noshade====取消阴影

&lt;   #相当于<
&gt;   #相当于>

&nbsp;  #该空格占据宽度受 字体 影响明显而强烈
&emsp;  #占据的宽度正好是1个中文宽度，且基本是不受字体影响

&copy;  #版权符号© 
&trade; #正在申请的商标™
&reg;   #已经申请成功的商标®

<div>标签，没有具体含义，用来划分页面的区域，独占一行。
    <div>你好你好你好你好</div>
    <div>你好你好你好你好</div>
    <div>你好你好你好你好</div>

<span>标签,没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
    <p>同志们、<span style="color: blueviolet;">朋友们！</span></p>

        

 

#注释快捷键  Ctrl+/
<!--   列表（有序）
        1.li里面可以随意放标签，但是ol里面只能放li
        2.数字是自动生成的
        3.Type：1，a,A,i,I
          start:取值只能是一个数字
快捷键（ol>li*4+回车）
     -->
    <ol type="1" start="3"> 
        <li>春眠不觉晓</li>
        <li>处处闻啼鸟</li>
        <li>夜来风雨声</li>
        <li>花落知多少</li>
    </ol>

<!--    列表（无序）
        1.li里面可以随意放标签，但是ul里面只能放li
        2.默认是黑色实心圆点
        3.Type：disc(实心小圆点)，circle(空心小圆点)，square(正方形)，none(无)
     -->
     <ul type="square">
         <li>蒸熊掌</li>
         <li>蒸羊羔</li>
         <li>烧花鸭</li>
     </ul>

<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>
<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>
<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>

 

<!--  <img src="../image/xx.png">   ../ 表示跳出当前文件夹 -->

<!-- 图片标签的属性 -->

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" ,width="200",height="200"/>
<img src="image/xx.png" alt="请尝试刷新页面">

<!-- 只设置一个宽度或高度，图片会等比例变化，不会导致失真 -->

<img src="image/ciyun.png" ,width="200">

 

<!-- 超链接标签 能够实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" targe="规定在何处打开文档">内容</a>
Target属性：规定在何处打开文档
A.target="_self"默认值
B.target="_black"新窗口打开
-->
<br>
    <a href="https://caniuse.com" target="_black">HTML5标准</a>

<a href="http://www.baidu.com">百度
    <img src="image/baidu.png" title="点击网页">
</a>

 

<!-- 表格的属性
     width px,百分比 （相对于父元素（所示页面）的）
     height px,百分比 （相对于父元素（所示页面）的） -->
<table border="1" align="left" width="10%" height="10px"
    bordercolor="red" bgcolor="yellow" cellspaing="5"
    cellpadding="50">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

 

<!-- tr行属性 -->
<table border="1" align="left" width="10%" height="10px"
     bordercolor="red" bgcolor="yellow">
     <!--height  高度 
         bgcolor 背景颜色
         align   文字水平对齐
         valign  文字垂直对齐 top，middle，bottom -->
      <tr bgcolor="orange" height="6" align="center" valign="middle">
         <!-- td：如果一个单元格的设置宽度，影响的是这一整列的宽度
                  如果一个单元格的设置高度，影响的是这一整行的高度  -->
         <td width="4%">1</td>
         <td height="5">2</td>
     </tr>
     <tr bgcolor="yellow">
         <td bgcolor="blue">3</td>
         <td valign="top">4</td>
     </tr>
 </table>

<!-- 表格合并列
      Colspan="所要合并的列数"必须给td
      Rowspan="所要合并的行数"必须给td -->
 <table border="1" align="reight" width="100" height="100px">
    <tr>
        <td>1</td>
        <td rowspan="2" colspan="2">2</td>
        <!-- <td>3</td> -->
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <!-- <td colspan="2">5</td> -->
        <!-- <td>6</td> -->
    </tr>
    <tr>
        <!-- <td>7</td> -->
        <td colspan="2">8</td>
        <!-- <td>9</td> -->
    </tr>
</table>

<!-- 表单标签  作用：收集用户信息
 -->
<form action="http://www.baidu.com" method="post">
    用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写" name="username"><br>
    密码：<input type="password" placeholder="请输入你的密码" name="mima"><br>
    <!-- 提交信息到action指定的地址 -->
    <input type="submit"value="登录">
</form>