HTML学习笔记

HTML学习笔记

1.网页基本信息

(1) head标签：网页头部
(2) meta标签：描述性标签
(3) body标签：网页主体

2.网页基本标签

(1) h+数字标签：标题标签
(2) p标签：段落标签
(3) br/标签：换行标签
(4) hr/标签：水平线标签
(5) strong标签：粗体标签
(6) em标签：斜体标签
(7) &nbsp；：换行
(8) &gt：大于号
(9) &lt：小于号
(10)&copy:版权符号

3.图像标签

<img src=../resources/images/1.jpg" alt="图片" title="新式神" width="100px" height="80px"/>

src：图像地址
alt：图像的代替文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度

4.超链接标签

4.1页面间链接

第一种：

<a href="http://www.baidu.com" >点击跳转</a>

第二种：

<a href="http://www.baidu.com" >
	<img src=../resources/images/1.jpg" alt="图片" title="新式神" width="100px" height="80px"/>
</a>

4.2锚链接

1.需要一个锚标记
2.跳转到锚标记
锚标记：

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

跳转到标记：

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

4.3功能性链接

邮件链接（mailto）

<a href="mailto:11111117@qq.com">点击联系我</a>

5.列表

1.有序列表

    <ol>
        <li>java</li>
        <li>python</li>
        <li>c</li>
    </ol>  

2.无序列表

  <ul>
      <li>java</li>
      <li>python</li>
      <li>c</li>u
  </ul>  

3.自定义列表

    <dl>
        <dt>书籍</dt>
        <dd>c</dd>
        <dd>python</dd>
        <dd>java</dd>

        <dt>数量</dt>
        <dd>100</dd>
        <dd>1000</dd>
        <dd>10000</dd>
    </dl>

dl:标签
dt:列表名称
dd:列表内容

6.表格

    <table border="1px">
        <tr>
            <td colspan="4">1-1</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
        </tr>
    </table>

colspan:跨列
rowspan:跨行

7.媒体元素

1.视频元素

 <video src="../resources/video/1.mp4" controls autoplay></video>

controls：表示控制条
autoplay：表示自动播放
2.音频元素

<audio src="../resources/audio/Faded.mp3" controls autoplay></audio>

8.页面结构

(1) header元素：标题头部区域内容
(2) footer元素：标记脚部区域内容
(3)section元素：独立区域
(4) article：独立的文章内容
(5) aside：相关内容和应用
(6) nav：导航类辅助内容

9.iframe内联框架

第一种：

    <iframe src="http://www.baidu.com" frameborder="0" width="500px" height="400px"/>

第二种：

 <iframe src="" name="hello" frameborder="0" width="500px" height="400px"/>
    <a href="http://www.baidu.com" target="hello">点击跳转</a>

10.表单

    <form action="1.html" method="get">
       <p>姓名：<input type="text" name="username"></p>
       <p>密码：<input type="password" name="pwd"></p>
       <p>
           <input type="submit">
           <input type="reset">
       </p>
   </form>

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

1.表单元素格式
type : 指定元素类型
name : 指定表单名称
value : 元素的初始值。type为radio时必须指定一个值
size : 指定表单元素的初始宽度
maxlength : type为text或password时，输入的最大字符数
checked : type为radio或checkbox时，指定按钮是否被选中
2.单选框(radio)

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

name相同，表示为一个组，只能选一个
checked表示默认选中
3.多选框

  <p>爱好:
          <input type="checkbox" value="sleep" name="hobby" checked>睡觉
          <input type="checkbox" value="watch" name="hobby">看片
          <input type="checkbox" value="run" name="hobby">跑步
  </p>

checked表示默认选中
4.按钮

        <p>
          <input type="button" name="btn" value="提交">
          <input type="image" src="../resources/images/1.jpg">
      </p>

注：点击后直接提交
5.下拉框

        <p>选择游戏：
          <select name="列表名称">
              <option value="选项的值" selected>dnf</option>
              <option value="选项的值">lol</option>
              <option value="选项的值">csgo</option>
          </select>
      </p>

selected表示默认选中
6.文本域

      <p>发表你的意见：
          <textarea name="textarea" cols="20" rows="20">你的想法</textarea>
      </p>

cols表示行，rows表示列
7.文件域

   <p>
           <input type="file" name="files">
            <input type="button" value="上传">
   </p>

8.邮件,url,数字验证验证

     <p>邮箱：
           <input type="email" name="email">
       </p>
       <p>URL:
           <input type="url" name="url">
       </p>
       <p>数量：
           <input type="number" name="num" max="100" min="0" step="1">
       </p>

9.滑块

        <p>voice：
           <input type="range" name="voice" min="0" max="100" step="3">
       </p>

10.搜索框

        <p>search:
           <input type="search" name="search">
       </p>

11.表单验证
placeholder设置提示性信息
required 设置属性不能为空
pattern(正则表达式)
12.其他属性设置
readonly 设置仅读
disable 设置禁用
hidden 设置隐藏域