Html基础

网页基本标签

<!-- 标题标签，最小六级 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>

<!-- 段落标签，相比于换行标签行间距更大 -->
<p>第一段</p>
<p>第二段</p>

<!-- 换行标签 -->
第一行<br/>第二行

<!-- 水平线标签 -->
<hr/>

<!-- 字体样式标签 -->
<strong>粗体</strong>
<em>斜体</em>

<!-- 注释和特殊符号标签 -->
空&nbsp;&nbsp;&nbsp;&nbsp;格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

图片标签img

图片标签属性

• src：图片地址，必填，一般写相对路径,从本文件开始，用…/返回上级目录，下转到图片路径
• alt：图片名称，必填，当图片不存在时代替显示的文字
• title：悬停文字，鼠标放在图片上会显示的文字
• width：图片高度
• heigh：图片宽度

<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="300" height="350">

链接标签a

链接标签属性

• href：跳转到的页面，必填
• target：跳转打开的位置，blank：在新页面打开，self：在当前页面打开

<a href="a.html" target="_blank">跳转</a>
<a href="https:www.baidu.com" target="_blank">跳转</a>

<!--target也可以填其他标签的name表示将跳转的链接放入对应标签中-->
<iframe src="" name="a" frameborder="0" width="100px" height="90px"></iframe>
<a href="h2.html" target="a">跳转</a>

锚链接

• 锚点：跳转到的地方

  <a name="top">顶部</a>
  

• 跳转点：点击跳转的地方，#前面可以加链接

  <a href="a.html#top">回到顶部</a>
  

• 应用：可以在一个页面地步设置跳转点跳转到另一个页面的顶部

功能性链接

邮件链接：mailto：邮箱地址

<a href="mailto:983982205@qq.com"></a>

列表标签

有序列表ordered list
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

无序列表unordered list
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

定义列表definition list
dt：definition list title     列表名称
dd：definition list define    列表内容
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

表格标签table

<!--表格标签
border：边框
tr：行
td：列
colspan：跨列
rowspan：跨行
-->
<table border="1px">
    <tr>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

媒体元素

<!--媒体标签
video：视频标签
audio：音频标签
controls：显示进度条
autoplay：自动播放
-->
<video src="../resources/video/a.mp4" controls autoplay></video>
<audio src="../resources/audio/1.aac" controls autoplay></audio>

页面结构

<header>
    <h2>网页头部</h2>
</header>
<nav>
    <h2>导航栏</h2>
</nav>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>

内联框架iframe

在页面嵌套其他网站的东西

<!--页面结构
src：链接地址，必填
width：宽度
height：高度
name：链接名称
-->
<iframe src="index.html" name="a" frameborder="0" width="100px" height="90px"></iframe>

输入框input

• type：输入内容类型，必填。
• name：输入内容名称，必填
• value：初始值
• disabled：禁用
• hidden：隐藏
• readonly：只读
• placeholder：提示
• required：不允许为空
• pattern：正则表达式验证

type选项：

1. text，文本输入框

   ​ maxlength：输入字符最大长度

   ​ size：输入框宽度

   名称：
   <input type="text" name="username" value="abc" maxlength="16" size="30" placeholder="输入名称">
   

2. password，密码输入框，输入字符会隐藏为“.”

   密码：<input type="password" name="password" value="123456" maxlength="16" size="30" pattern="^[a-zA-Z]\w{5,17}$"><!--以字母开头，长度在6~18之间，只能包含字母、数字和下划线=""-->
   

3. radio，单选框，属性必须有value，相同name的选项只能选一个，checked表示默认选中

   <p>性别：
       <input type="radio" value="boy" name="sex">男
       <input type="radio" value="girl" name="sex" checked>女
   </p>
   

4. checkbox，多选框，属性必须有value，一般同一组别写相同name，checked表示默认选中

   <p>爱好：
       <input type="checkbox" value="run" name="hobby">跑步
       <input type="checkbox" value="swim" name="hobby" checked>游泳
       <input type="checkbox" value="eat" name="hobby">吃
   </p>
   

5. 按钮：

   <p>按钮：
       <input type="button" value="普通按钮">
       <input type="submit"><!--默认value="提交"-->
       <input type="reset"><!--默认value="重置"-->
       <!--图片按钮，src表示图片路径，点击跳转，类似submit提交-->
       <input type="image" src="../resource/image/1.jpg">
   </p>
   

6. file，文件

   <input type="file" name="file">
   <input type="button" value="上传" name="upload">
   

7. email，邮件，只能做简单验证

   邮件：<input type="email" name="email">
   

8. url，链接，只能做简单验证

   链接：<input type="url" name="url">
   

9. number，数字，范围验证，step表示步长，只能是范围边缘的倍数

   <!--输入35点击上下调只会显示40或30-->
   <input type="number" name="num" max="50" min="0" step="10">
   

10. range，滑块

音量：<input type="range" name="voice" min="0" max="100" step="2">

11. search，搜索

    搜索：<input type="search" name="search">
    

下拉框select

<!--下拉框
selected    默认选择
-->
<p>年龄：
    <select name="列表名称" id="">
        <option value="选项的值" selected>0-10</option>
        <option value="选项的值">10-20</option>
        <option value="选项的值">20以上</option>
    </select>
</p>

文本域textarea

<!--文本域
cols：显示的列
rows：显示的行
默认行列，但是可以拖动改变大小
readonly：只读
-->
<p>反馈：
    <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>

锁定位置label

点击后锁定到对应的地方

<label for="a"></label>
<input type="text" id="a">

表单提交form

• action：提交的位置，可以是网页也可以是请求处理地址

• method：提交的方式，get或post

  ​ get提交：可以在url中获取提交的信息，不安全但高效。

  ​ post提交：参数安全，可以传输大文件

<form action="h2.html" method="post" >
    <p>名称：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>