html学习笔记

W3C标准包括

• 结构化标准语言（HTML、XML）

• 表现标准语言（CSS）

• 行为标准（DOM、ECMAScript）

 

网页基本标签

• 标题标签：<h1></h1> 到<h6></h6>

• 段落标签：<p></p>

• 换行标签:

• 水平线标签:<hr/>

• 字体样式标签：

  • 粗体<strong></strong>

  • 斜体<em></em>

• 注释和特殊符号:

  • 换行符

  • &gt：大于号

  • &lt：小于号

  • &copy：版权所有符

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

• 链接标签：

  <!-- a标签
  href:必填，表示要跳转到的那个页面
  target:表示窗口在哪里打开
      _blank 在新标签页中打开
      _self 在自己的网页中打开
  -->
  <a href="_blank">链接名称</a>
  ​
  <!-- 锚链接
  1、需要一个锚标记
  2、跳转到标记
  #
  -->
   <!-- 使用name作为锚标记-->
  <a name="top">顶部</a>
  <a href="#top">回到顶部</a>

• 功能性链接：

  <!-- 功能性链接
  邮件链接：mailto:
  QQ链接：
  -->
  <a href="mailto:2759287641@qq.com">点击联系我</a>

列表

• 有序列表<ol>

  <li>内容</li>

  </ol>

• 无序列表<ul> <li> 内容</li> </ul>

• 自定义列表

  <!--自定义列表
  dl:标签
  dt:列表名称
  dd:列表内容
  公司网站底部
  -->
  <dl>
      <dt>学科</dt>
      <dd>Java</dd>
      <dd>Python</dd>
      <dd>Linux</dd>
      <dd>C</dd>

表格

<!-- 表格table
行 tr
列 td
-->
<table>
    <tr>
        <td></td>
    </tr>
    <tr>
     <!--colspan 跨列-->
        <td colspan="4">1-1</td>
        </tr>
        <tr>
         <!-- rowspan跨行-->
        <td rowspan="2">2-1</td>
        </tr>
</table>

音频元素<audio src="" ></audio>

视频元素<video src="" controls autoplay> </video>

controls控制条 autoplay自动播放

页面结构分析

• header标题头部区域的内容（用于页面或页面中的一块区域）

• footer标记脚部区域的内容（用于整个页面或页面的一块区域）

• section Web页面中的一块独立区域

• article 独立的文章内容

• aside 相关内容或应用（常用于侧边栏）

• nav导航类辅助内容

iframe内联框架

<!-- iframe内联框架
src:地址
w-h:宽度高度
-->
<iframe src=""  frameborder="0" width="1000px" height="800px"> </iframe>

表单语法

<!-- 表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post方式提交:比较安全，传输大文件
-->
<form action="2、基本标签.html" method="get">
    <!-- 文本输入框： input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <!-- 密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
​
    
    <!-- 单选框标签
    intput type="radio"
    value : 单选框的值
    name:表示组
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!-- 多选框
    input type="checkbox"
    -->
    <p> 爱好：
    <input type="checkbox" value="sleep" 
        name="hobby">睡觉
        <input type="checkbox" value="code"
        name="hobby">敲代码
        <input type="checkbox" value="chat"                     name="hobby">聊天
        <input type="checkbox" value="game"                     name="hobby">游戏
    </p>
    <!--按钮
    input type="button"  普通按钮
    input type="image"    图像按钮
    input type="submit"   提交按钮
    input type="reset"    重置按钮
    -->
    <p>按钮:
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src=""> -->
    </p>
    <!-- 下拉框,列表框
    -->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>
    <!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
​
    <!--文件域
     input type="file"
     name="files"
     -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
     <p>
        <input type="submit">
        <input type="reset">
    </p>
​
</form>

隐藏域 hidden

只读 readonly

禁用 disabled

表单初级验证

• placeholder 文本框中显示提示信息

• required 不能为空，用于文本框中

• <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

• pattren 正则表达式

•