IMUT-LF

HTML-学习笔记

HTML

网页的基本信息

  • DOCTYPE声明：告诉浏览器，网页使用的规范，如html（默认）

  • title标签：网页标题

  • meta标签：描述性标签，用来描述网站的一些信息，一般用来做SEO

    如：

    <meta charset="UTF-8">
    <meta name="keywords" content="...">    
    <meta name="description" content="...">

     

网页的基本标签

  • 标题：<h1></h1>~<h6></h6>

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

  • 换行标签：

  • 水平线标签：<hr/>

  • 注释：<!-- -->

  • 特殊符号：空格、大于号、小于号、版权符

图像标签

<img src="" alt="" title="">

src（必填）：图片路径（相对路径、绝对路径）

alt（必填）：找不到图片显示的文字

title：鼠标悬停显示的文字

如：

<img src="../pic/pic_01.jpg" alt="风景图" title="风景图_1" 
     width="500px" height="500px">

 

超链接

<a href="" target="">

href（必填）：表示要跳转到哪个页面

target：表示窗口在哪里打开

  • _blank：在新标签页中打开

  • _self：在自己的网页中打开

锚链接

  1. 需要一个锚标记 --使用a标签的name属性作为锚标记

  2. 跳转到锚标记 --使用a标签的href属性，加上#

如：

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

可以在页面间进行锚链接跳转，直接在href指定的跳转页面后跟上 # + 指定页面的锚标记

如：

<a href="Demo01.html#down" target="_blank">页面间跳转</a>

功能性链接

邮件链接：mailto

如：

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

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>

行内元素和块元素

小标签行内元素，大标签块元素

列表

  • 有序列表

    如：

    <ol>
        <li></li>
        ...
        <li></li>
    </ol>

     

  • 无序列表

    如：

    <ul>
        <li></li>
        ...
        <li></li>
    </ul>

     

  • 自定义列表

    如：

    <dl>			标签
    <dt></dt>	列表名称
    <dd></dd>	列表内容
    ...
    <dd></dd>

    ...

&lt;dt&gt;&lt;/dt&gt;
&lt;dd&gt;&lt;/dd&gt;
...
&lt;dd&gt;&lt;/dd&gt;

    

    </dl>

     

表格

表格：table --标签

tr：行 td：列

rowspan：跨行 colspan：跨列

border：边框宽度

如：

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">刘峰</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">乌啦啦</td>
        <td>语文</td>
        <td>90</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>90</td>
    </tr>
</table>

媒体元素

视频：video

音频：audio

src：资源地址

controls：控制条

autoplay：自动播放

如：

<video src="../pic/video_01.mp4" controls></video>
...
<audio src="../pic/audio_01.mp3" controls autoplay></audio>

网页的简单布局

  • header：头部区域内容

  • footer：脚部区域内容

  • section：web页面中的一块独立区域（主体）

  • article：独立的文章内容

  • aside：相关内容或应用

  • nav：导航类辅助内容

内联框架

iframe：

src（必填）：地址

width-height：宽度、高度

如：

<iframe src="" frameborder="0" 
        width="600" height="400"></iframe>

iframe还可以配合超链接a标签使用，点击后在iframe中跳转到指定页面

如：

<iframe src="" name="hello" frameborder="0" width="600" height="400"></iframe>

<a href="Demo01.html" target="hello"> 点击跳转</a>

 

表单

form：get/post

action：表单要提交的位置，可以是网站，也可以是一个请求处理地址

method：get、post提交方式

  • get方式提交：在url中可以看到提交的信息，不安全，高效

  • post方式提交：比较安全，可以提交大文件

 

表单中组件：input、select、textarea...

name：获取值的名称，在表单组件中最好都加上name，方便检查

value：默认初始值

maxlength：最大长度

size：文本框的长度

 

安全性：

readonly：只读，不能修改

disabled：不可选/不可用

hidden：隐藏（可以配合默认初始值使用）

 

简单验证：

placeholder：提示信息

required：非空判断

pattern：正则表达式

 

如：

<form action="Demo01.html" method="get">
    <!--  文本输入框：input type="text"  -->
    <p>姓名：<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p>
    <!--  密码输入框：input type="password"  -->
    <p>密码：<input type="password" name="pwd" required></p>
    <!--  单选框 input type="radio" value="boy" -->
    <!--  单选框必须指定默认初始值value，如果多个单选框只能选一个的话可以放在相同的name组里
          checked：默认选中-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex" disabled>女
    </p>
    <!--  多选框
      input type="checkbox"
    checked:默认选中
     -->
    <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>
    <!--  下拉框
    selected:默认选中
        <select>
            <option></option>
        </select>
    -->
    <p>
        国家：
        <select name="country" id="country">
            <option value="us">美国</option>
            <option value="china" selected>中国</option>
            <option value="india">印度</option>
            <option value="uk">英国</option>
        </select>
    </p>
    <!--  按钮
      input type="button"：普通按钮
      input type="image"：图像按钮
      input type="submit"：提交按钮
      input type="reset"：重置
     -->
    <p>
        按钮：
        <input type="button" name="btn1" value="提交">
        <input type="image" src="../pic/pic_02.jpg" width="100px" height="100px">
    </p>
    <!--  邮箱验证
    input type="email"
    -->
    <p>
        邮箱：
        <input type="email" name="email" required>
    </p>
    <!--  URL
    input type="url"
    -->
    <p>
        URL：
        <input type="url" name="url" required>
    </p>
    <!--  数字验证
    input type="number"
        max:最大值
        min:最小值
        step:输入间隔
    -->
    <p>
        商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    <!--  滑块
    input type="range"
    -->
    <p>
        音量：
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>
    <!--  搜索  -->
    <p>
        搜索：
        <input type="search" name="search">
    </p>
    <!--  增强鼠标可用性
    点击文字可以跳到指定位置，如点击输入框前的文字可以到框内显示
    label for="mark"
    for中的内容必须是一个id
    -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark" name="label">
    </p>
    <!--  自定义邮箱  -->
    <p>
        <input type="text" name="diyemail" pattern="^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$">
    </p>
    <!--  文本域textarea
      cols：列
      rows：行
    -->
    <p>
        反馈：
        <textarea name="back" id="back" cols="30" rows="10">文本内容</textarea>
    </p>
    <!--  文件域
    input type="file" name="files">
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

 

input中：type类型

文本框：text

<input type="text" name="username" maxlength="8" size="30" 					   placeholder="请输入用户名" required>

密码：password

<input type="password" name="pwd" required>

单选框：radio（如果有多个只能选一个，如男/女，则需要将两个radio指定同一name）

ckecked：默认选中

<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex" disabled>女

多选框：checkbox（如上，多个选项放在一组name里）

checked：默认选中

<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">游戏

按钮：

  • 普通按钮：button

  • 图像按钮：image

  • 提交按钮：submit

  • 重置：reset

<input type="button" name="btn1" value="提交">
<input type="image" src="../pic/pic_02.jpg" width="100px" height="100px">
<input type="submit">
<input type="reset">

以下input组件有简单验证：

邮箱：email

<input type="email" name="email" required>

自定义邮箱：

<input type="text" name="diyemail" pattern="^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$">

URL：url

<input type="url" name="url" required>

数字：number（可用作商品数量等）

可以指定：

  • max：最大值

  • min：最小值

  • step：输入间隔

<input type="number" name="num" max="100" min="0" step="1">

滑块：range（可用作音量等，可同上指定）

<input type="range" name="voice" min="0" max="100" step="1">

搜索：search

<input type="search" name="search">

增强鼠标可用性：label

点击鼠标可跳到指定位置开始（输入），for中必须指定一个id

<label for="mark">你点我试试</label>
<input type="text" id="mark" name="label">

文件域：

<input type="file" name="files">

 

select类型：

下拉列表：select option

selected：默认选中

<select name="country" id="country">
      <option value="us">美国</option>
      <option value="china" selected>中国</option>
      <option value="india">印度</option>
      <option value="uk">英国</option>
</select>

 

textarea类型：

文本域：textarea

行：rows

列：cols

<textarea name="back" id="back" cols="30" rows="10">文本内容</textarea>

 

posted @ 2021-01-15 21:41  IMUT_LF  阅读(142)  评论(0)    收藏  举报

IMUT-LF