HTML基础总结

1.基本标签

<h1> 一级标签</h1>
<h2>二级标签 </h2>

<p>段落标签</p>
<br/>换行标签
<hr/>水平线标签
<strong>粗体</strong>
<em>斜体</em>

<!--
空格 &nbsp;   大于符号 &gt;  小于符号 &lt;  版权符号  &copy;
特殊符号  &+其他；
-->
<!-- html注释-->

2.图像标签

<img src="path" alt="name" title="" width="" heigth="">

<!--
src 图片地址（必填），相对地址推荐，绝对地址  ../ 上一级目录
alt 图片名字（必填）
title  悬停文字（鼠标放在图片上上显示的文字信息）
-->

3.超链接标签

<a href="path" target="目标窗口位置"> 链接文本或图片  </a>
<!--
href:链接路径
target:链接在那个窗口打开。常用值： _self 在当前窗口打开超链接；  _blank  在一个新的窗口打开超链接
-->

<!--
  *************1.锚链接***************
1.需要一个标记
2.跳转到标记
-->

<a name="top">顶部</a>        <!--使用name作为标记--> 
<a href="#top">回到顶部</a>    <!--使用#+名字跳转-->

<!--
  *************2.功能性链接***************
1.邮件链接
<a href="mailto:1092588271@qq.com">点击联系我</a>
2.qq链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取小电影！" title="你好，加我领取小电影！"/></a>
-->

4.行内元素和块元素

块元素

无论内容多少，该元素独占一行；（p, h1–h6标签）；

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行； （a . strong . em …）

5.列表标签

<!--
1.有序列表 order list  <ol></ol>  应用范围:试卷，问答
2.无序列表 unorder list  <ul></ul>应用范围:导航，侧边栏
3.自定义列表 design list <dl></dl> 应用范围:试卷，问答
-->

1.有序
<ol>
    <li>python</li>
    <li>java</li>
    <li>c</li>
</ol>

2.无序
<ul>
    <li>python</li>
    <li>java</li>
    <li>c</li>
</ul>
3.自定义
<dl>
    <dt>自定义标题</dt>
    
    <dd>python</dd>
    <dd>java</dd>
    <dd>c</dd>   
</dl>

6.表格标签

<!--
表格table标签
行 tr     row
列 td
-->

<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="2">...<td>
    	<td>1<td>
        <td>2<td>
        <td>3<td>
    </tr>    	
    <tr>
        <!--rowspan跨列-->
        <td rowspan="2">...<td>
        <td>4<td>
        <td>5<td>
        <td>6<td>
    </tr> 
    <tr>
    	<td>7<td>
        <td>8<td>
        <td>9<td>
    </tr>
</table>

7.视频和音频标签

<!--
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

8.页面结构分析

header：标记头部区域的内容

footer：标记脚部区域的内容

section：web页面中的一块独立区域

article：独立的文章内容

aside：侧边栏

nav: 导航类内容

9.iframe内联框架

<iframe src="http://baidu.com" name="hello" frameborder=""width="" height=""></iframe>
<a href="http://baidu.com" taget="hello">点击跳转</a>

<!--
src:引用页面地址
name：框架标识名
-->

10.表单 POST 和GET

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get 两种方式
  get:我们可以在url中看到我们提交的信息，不安全，高效
  post:比较安全，可以传输大文件

value:默认初始值
maxlength：最多能写多少个字符
size：文本框的长度

<input type="reset"value="清空全部" hidden />
<input type="reset"value="清空全部" readonly />
<input type="reset"value="清空全部" disabled />
hidden:隐藏域
readonly:只读
disabled:禁用
表单初级验证
placeholder 提示信息
required 非空判断
pattern 正则表达式
-->
<form  action="" method="">
    <!--文本输入框input type="text"  -->
    <p>名字：<input type="text" name="username"value=""maxlength=""size=""/> </p>
    <p>密码：<input type="password" name="pwd"/> </p>
    <p>
        <input type="submit">
        <input type="reset"value="清空全部"hidden>
    </p>
</form>

11.单选框，按钮，多选框

<!--
1.单选框标签
input type="radio"
value:单选框的值
name：表示组，相同则表示为一组
-->
<p>性别：
     <input type="radio"value="boy"name="sex"/>男
     <input type="radio"value="girl"name="sex"/>女
</p>



<!--2.多选框
input type="checkbox"

-->
<p>爱好：
      <input type="checkbox"value="sleep"name="hobby"/>睡觉
      <input type="checkbox"value="sing"name="hobby"/>唱歌
      <input type="checkbox"value="code"name="hobby"/>写代码  
</p>



<!--3.按钮
input type="button"普通按钮
input type="image"图片按钮
input type="submit"提交按钮
input type="reset"重置按钮
-->
<p>按钮：
      <input type="button"value="单击我变大"name="btn1"/>
      <input type="button"value="单击我变小"name="btn2"/>
      <input type="image" src="">
</p>

12.下拉框 列表框 文本域 文件域

国家： 中国

文本内容

<!--邮件验证-->
<p>
    <input type="email" name="email">
</p>


<!--URl-->
<p>
    <input type="url" name="url">
</p>

<!--数字-->
<p>
    <input type="number" name="number"max="100"min="0"step="2">
</p>

<!--滑块-->
<p>音量：
    <input type="range" name="voice"max="100"min="0"step="2">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>