Loading

HTML笔记

来源：后盾人 (houdunren.com) - 仅学习使用

基本结构

下面是 HTML 文档的基本组成部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="Mysql,Laravel,Javascript,HTML,CSS,ES6,TYPESCRIPT,后盾人,后盾人教程" />
    <meta name="description" content="后盾人专注WEB开发，高密度更新视频教程" />
    <title>后盾人</title>
</head>
<body>

</body>
</html>
标签 说明
DOCTYPE 声明为 HTML 文档
html lang:网页的语言，如 en/zh 等，非必选项目
head 文档说明部分，对搜索引擎提供信息或加载 CSS、JS 等
title 网页标题
keyword 向搜索引擎说明你的网页的关键词
description 向搜索引擎描述网页内容的摘要信息
body 页面主体内容

基本标签

标签 功能
p 标记一个段落内容
pre 原样显示文本内容包括空白、换行等。
br 换行
span 常用于对某些文本特殊控制，但该文本又没有适合的语义标签。
div 块标签

图片

在网页中使用 img 标签展示图片，图片的大小、边框、倒角效果使用 css 处理。

<img src="houdunren.png" alt="后盾人"/>
属性 说明
src 图片地址
alt 图像打开异常时的替代文本

网页链接

不能通过一个页面展示网站的所有功能，需要在不同页面中跳转，这就是链接所起到的功能。

<a href="http://doc.houdunren.com" target="_blank" title="文档库">后盾人文档库</a>
选项 说明
href 跳转地址
target _blank 新窗口打开 _self 当前窗口打开
title 链接提示文本

打开窗口

没看到过，可以了解一下

下面设置 target 属性在指定窗口打开。

<a href="https://www.houdunren.com" target="hdcms">
        在IFRAME中打开
</a>
<script>
	window.open('https://www.hdcms.com', 'hdcms');
</script>

锚点链接

总结就是href=“#id”

锚点可以设置跳转到页面中的某个部分。

  1. 为元素添加id 属性来设置锚点

  2. 设置 a 标签的 href 属性

  3. <a href="#comment-1">跳转到评论区</a>
<div style="height: 1000px;"></div>

<div id="comment-1" style="background: green;">
	这是后盾人评论内容区
</div>

  4. 也可以跳转到不同页面的锚点

    <a href="article.html#comment-1">跳转到评论区</a>

邮箱链接

<a href="mailto:2300071698@qq.com">给后盾人发送邮件</a>

拨打电话

<a href="tel:99999999999">联系客服</a>

下载文件

默认情况下使用链接可以下载浏览器无法处理的文件

<a href="https://www.hdcms.com/HDCMS-201905072207.zip">下载HDCMS</a>

表单

FORM

一般情况下表单项要放在 FORM 内提交。

<form action="hd.php" method="POST">
	<fieldset>
		<legend>测试</legend>
		<input type="text">
	</fieldset>
</form>
属性 说明
action 后台地址
method 提交方式 GET 或 POST

LABEL

使用 label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的 ID 在页面中是唯一的。

<form action="hd.php" method="POST" novalidate>
<label for="title">标题</label>
<input type="text" name="title" id="title">
</form>

也可以将文本框放在 label 标签内部，这样就不需要设置 id 与 for 属性了

INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性 说明
type 表单类型默认为 text
name 后台接收字段名
required 必须输入
placeholder 提示文本内容
value 默认值
maxlength 允许最大输入字符数
size 表单显示长度，一般用不使用而用 css 控制
disabled 禁止使用，不可以提交到后台
readonly 只读，可提交到后台
capture 使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera

基本示例

<form action="hd.php" method="POST" novalidate>
  <fieldset>
      <legend>文本框</legend>
      <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
  </fieldset>
</form>

调取摄像头

当 input 类型为 file 时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码。

<input type="file" capture="camera" accept="image/*" />

其他类型

通过设置表单的 type 字段可以指定不同的输入内容。

类型 说明
email 输入内容为邮箱
url 输入内容为 URL 地址
password 输入内容为密码项
tel 电话号，移动端会调出数字键盘
search 搜索框
hidden 隐藏表单
submit 提交表单

HIDDEN

隐藏表单用于提交后台数据，但在前台内容不显示所以在其上做用样式定义也没有意义。

<input type="hidden" name="id" value="1">

提交表单

创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用 AJAX，或 HTML 的表单按钮。

  1. 使用 input 构建提交按钮，如果设置了 name 值按钮数据也会提交到后台，如果有多个表单项可以通过些判断是哪个表单提交的。

    <input type="submit" name="submit" value="提交表单">

  2. 使用 button 也可以提交，设置 type 属性为submit 或不设置都可以提交表单。

    <button type="submit">提交表单</button>

禁用表单

通过为表单设置 disabled 或 readonly 都可以禁止修改表单，但 readonly表单的数据可以提交到后台。

<input type="text" name="web" value="houdunren.com" readonly>

PATTERN

表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库如 formvalidator (opens new window)或 validator.js (opens new window)。

属性 说明
pattern 正则表达式验证规则
oninvalid 输入错误时触发的事件 
<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}"
	oninvalid="validate('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>

<script>
	function validate(message) {
		alert(message);
	}
</script>

TEXTAREA

文本域指可以输入多行文本的表单，当然更复杂的情况可以使用编辑器如ueditor、ckeditor等。

选项 说明
cols 列字符数（一般使用 css 控制更好）
rows 行数（一般使用 css 控制更好）

image-20190805214818055

<textarea name="content" cols="30" rows="3">houdunren.com</textarea>

SELECT

下拉列表项可用于多个值中的选择。

选项 说明
multiple 支持多选
size 列表框高度
optgroup 选项组
selected 选中状态
option 选项值

image-20190805215509898

<select name="lesson">
        <option value="">== 选择课程 ==</option>
        <optgroup label="后台">
            <option value="php">PHP</option>
            <option value="linux">LINUX</option>
            <option value="mysql">MYSQL</option>
        </optgroup>
        <optgroup label="前台">
            <option value="php">HTML</option>
            <option value="linux">JAVASCRIPT</option>
            <option value="mysql">CSS</option>
        </optgroup>
</select>

RADIO

单选框指只能选择一个选项的表单，如性别的选择男、女、保密 只能选择一个。

选项 说明
checked 选中状态

image-20190805214006476

<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>

<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>

name是为了提交数据的名字，value是提交的值，id是用来label获取焦点的

CHECKBOX

复选框指允许选择多个值的表单。

image-20190805214322364

<fieldset>
        <legend>复选框</legend>
        <input type="checkbox" name="sex" value="boy" id="boy">
        <label for="boy">PHP</label>

        <input type="checkbox" name="sex" value="girl" id="girl" checked>
        <label for="girl">MYSQL</label>
</fieldset>

name是为了提交数据的名字，value是提交的值，id是用来label获取焦点的

文件上传

文件上传有多种方式，可以使用插件或 JS 拖放上传处理。HTML 本身也提供了默认上传的功能，只是上传效果并不是很美观。

选项 说明
multiple 支持多选
accept 允许上传类型 .png,.psd 或 image/png,image/gif

image-20190805220123718

<form action="" method="POST" enctype="multipart/form-data">
	<fieldset>
		<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
	</fieldset>
	<button>保存</button>
</form>

DATALIST

input 表单的输入值选项列表

image-20190814175611789

<form action="" method="post">
  <input type="text" list="lesson">
  <datalist id="lesson">
    <option value="PHP">后台管理语言</option>
    <option value="CSS">美化网站页面</option>
    <option value="MYSQL">掌握数据库使用</option>
  </datalist>
</form>

autocomplete

要使autocomplete生效，首先得有name值啊，不然怎么提交？怎么能有提交记录？

浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

<form action="">
  <input type="search" autocomplete="on" name="content" />
  <button>提交</button>
</form>

列表

列表的使用与word 等软件的列表概念相似，只不过是应用在网页展示中。

有序列表

有序列表是指有数字编号的列表项，可以使用CSS定义更多样式，具体请查看 CSS 章节。

image-20190801233425533

<style>
        .li-style1{
            /*
            circle      空心圆
            disc        实心圆
            square      实心方块
            decimal     数字
            upper-alpha 大写字母
            lower-alpha 小写字母
            upper-roman 大写罗马数字
            lower-roman 小写罗马数字
             */
            list-style-type: decimal;
        }

        .li-style2{
        	/* 取消风格 */
            list-style: none;
        }
        .li-style3{
        	/*inside 内部 outside 外部（默认）*/
        	list-style-position: inside;
        }
</style>

<ol start="1">
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ol>

无序列表

没有数字编号的列表项，可以使用CSS定义更多样式，具体请查看 CSS 章节。

image-20190801233519967

<ul>
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ul>

描述列表

描述列表指每个列表项有单独的标题。

image-20190801234034944

<dl>
	<dt>开源产品</dt>
	<dd>hdcms内容管理系统</dd>
	<dd>hdjs前库组件库</dd>

	<dt>网站导航</dt>
	<dd>houdunren.com</dd>
	<dd>houdunwang.com</dd>
</dl>

表格

表格在网页开发中使用频率非常高，尤其是数据展示时。

基本使用

属性 说明
caption 表格标题
thead 表头部分
tbody 表格主体部分
tfoot 表格尾部 
<table border="1">
        <caption>后盾人表格标题</caption>
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>后盾人</td>
                <td>2020-2-22</td>
            </tr>
        </tbody>
</table>

单元格合并

下面是水平单元格合并

image-20190806225621113

<table border="1">
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">后盾人 2020-2-22</td>
            </tr>
        </tbody>
    </table>

下面是垂直单元格合并

image-20190806225731776

<table border="1">
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">后盾人</td>
                <td>2030-03-19</td>
            </tr>
            <tr>
                <td>2035-11-08</td>
            </tr>
        </tbody>
</table>

视频

Adobe 与苹果公司对 FLASH 都不支持或消极状态，这时 HTML 提供对视频格式的支持，除了使用 html 提供的标签来播放视频外，也有很多免费或付费的插件，如video.js (opens new window)、阿里云播放器 (opens new window)等等。

属性说明

属性 描述
autoplay 如果出现该属性，则视频在就绪后马上播放（需要指定类型如 type="video/mp4")。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload=metadata值将加载视频尺寸或关键针数据，目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
src 要播放的视频的 URL。

image-20190805223010377

<video src="houdunren.mp4" autoplay="autoplay"
	loop muted controls width="800" height="200">

  <source src="houdunren.mp4" type="video/mp4">
  <source src="houdunren.webm" type="video/webm">

</video>

source是浏览器供自动获取可选的播放源

音频

HTML 对声音格式文件也提供了很好的支持。

属性说明

属性 描述
autoplay 如果出现该属性，则视频在就绪后马上播放。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload="metadata"值将加载视频尺寸或关键针数据，目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
src 要播放的视频的 URL。

image-20190806224227295

<audio controls autoplay loop preload="auto">
	<source src="houdunren.ogg" type="audio/ogg">
	<source src="houdunren.mp3" type="audio/mp3">
</audio>

source是浏览器供自动获取可选的播放源

posted @ 2022-07-02 22:29  橘崽崽啊  阅读(80)  评论(0)  编辑  收藏  举报