html入门学习笔记

基本标签：
   标题标签： <h1> </h1>    h1-h6  闭合标签成对出现
   段落标签：<p> </p> 分段显示内容
   换行标签： <br/> 单标签(自闭合标签)
   水平线标签 <hr/>  自闭合标签
   粗体标签：<strong> </strong>
   斜体标签： <em> </em>
   注释标签： <!---->
   特殊符号：空格(&nbsp;)、大于(&gt;)、小于(&lt;)、版权符号(&copy;)
图像标签：
    <img src="url_path" alt="text" title="text" width="x" height="y"/>
    src ”图像所在位置路径“ alt "图像的替代文字" titile "鼠标悬停提示文字" width、height "图像高度、宽度"
    ../ 表示上一级目录
 链接标签：
    <a href="url_path" target="目标窗口位置"> 链接的文本或图像</a>
    target "链接在那个窗口打开" 常用值：_self(当前页面打开) 、_blank (新标签窗口打开)
   锚标签：1.定义一个锚标记(a标签的name属性) 2.#name
   功能性链接：
        邮箱链接：<a href="mailto:邮箱地址"> </a>
        QQ链接：https://shang.qq.com/v3/widget.html   点击进去即可了解清楚
 块元素和行内元素：
    块元素：无论内容多少，独占一行  p,h1-h6 等
    行内元素：内容撑开宽度，左右都是行内元素的可以排在一行 a,strong(粗体),em(斜体)
列表：
    有序列表：
            <ol>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
            </ol>
    无序列表：
            <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            </ul>
    自定义列表：  dl:标签  dt：列表名称  dd：列表内容
        <dl>
            <dt> </dt>
            <dd> </dd>
            <dd> </dd>
            <dd> </dd>
        </dl>
表格：<table> </table>
    行 <tr> </tr> row
    列 <td> </td> table data
    属性：colspan 跨列 指定列数 rowspan 跨行 指定行数
媒体元素：
    视频元素(video)  <video src="" controls autoplay> </video>
        controls :显示控件
        autolpay:自动播放
    音频元素(audio) <audio src="" controls autoplay> </audio>
        controls :显示控件
        autolpay:自动播放
 页面结构分析：
    header  标题头部区域的内容(用于页面或者页面中的一块区域)
    footer 标记脚部区域的内容(用于整个页面或者页面的一块区域)
    section web页面中的一块独立区域
    article 独立的文章内容
    aside 相关内容或者应用(常用于侧边栏)
    nav 导航类辅助内容
iframe内联框架：
    <iframe src="url_path" name="mainFrame"> </iframe>
    name:框架标识名
    <iframe src="" frameborder="0" name="B站" width="700px" height="400px"></iframe>
    <a href="https://www.bilibili.com/" target="B站">点击跳转</a>
  通过超链接可以进行跳转name标识如上
表单：
<form method="" action=""></form>
    method : 提交的请求方式：get、post  action：表单提交位置
    get提交方式：可以在url中看到提交的信息 不安全但效率高
    post提交方式：看不到信息 安全 可以传输大文件 进行上传与下载
<input type="" name="" value="">
单选框标签：radio
    <input type="radio" name="sex" value="boy">
    <input type="radio" name="sex" value="girl">
        value： 单选框的值   name: 表示组 避免出现全选情况  name值相同为同一组 如上
多选框标签： checkbox
     <input type="checkbox" name="sex" value="boy">
 按钮标签：
    <input  type="button" name="" value="点击">
    value ： 显示内容值
    图像按钮：<input type="image" src="url_path">
    src: 图像路径 可进行提交
  提交性按钮 : submit reset button image  都是input标签里面的type属性值
下拉框、列表框：
    <select name="列表名称" >
        <option value="选项里面的值">中国</option>
        <option value="选项里面的值">瑞士</option>
        <option value="选项里面的值" selected > 印度</option>
        <option value="选项里面的值">巴基斯坦</option>
        </select>
     selected属性  修改默认出现名称
 文本域标签：
    <textarea name="textarea" cols="40" rows="10" > <textarea>
 文件域：
    <input type="file"  name="files" >
        name:上传 否则无法进行上传
验证标签：
    邮箱：<input type="email" name="email">
    URL: <input type="url" name="url">
    数字 :<input type="number" name="num" max="100" min="0" step="10">
    滑块：<input type="range" name="range" max="100" min="0" step="2">
    搜索框：<input type="search" name="search"
表单应用
    隐藏域 hidden  键值依旧存在
    只读 readonly 以上任何区域
    禁用 disabled 以上任何区域
 增强鼠标可用性：
    <label for="" ></label>
    for : 指向属性id位置
 表单初级验证：
    目的：减轻压力、安全
    常用方式：
        placeholder：提示信息 输入框控件中
        required: 不能为空(非空判断)
        pattern : 正则表达式