投稿
  1. 极客之音首页
  2. 技术随笔

HTML详细入门（完整版）

小半 • • 技术随笔 • 阅读 117

导读：本篇文章讲解 HTML详细入门（完整版），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

HTML5学习笔记

初识html

简介

Hyper Text Markup Language(超文本标记语言) 超文本包括：文字、图片、音频、视频、动画等

W3C标准

World Wide Web Consortium 万维网联盟 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构

W3C标准包括

  • 结构化标准语言(HTML、XML)
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

HTML的基本信息

<!--DOCTYPE告诉浏览器，告诉浏览器我们要使用什么样的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签表示页面的头部-->
<head>
    <!--meta描述性标签，他用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--body标签代表网页主题-->
<body>

</body>
</html>

网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1.标题标签-->
<h1>一集标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--2.段落标签-->
<p>给时光以生命，给岁月以文明。</p>
<p>我爱你，与你有何相干？毁灭你，又与你有何相干？</p>
<p>把海弄干的鱼在海干前上了陆地，从一片黑暗森林奔向另一片黑暗森林。</p>

<!--3.换行标签-->
<br>
<!--4.水平线标签-->
<hr>
<!--5.字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--6.常见的特殊符号-->
空格： &nbsp;
>: &gt;
< : &lt;
版权 ：&copy


</body>
</html>

图像、超链接、网页布局

图像

常见的图像格式：

  • jpg
  • GIF
  • PNG
  • BMP

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaTDaYRp-1650796932218)(C:\Users\Leo\AppData\Roaming\Typora\typora-user-images\1650778860499.png)]

<img src="path" alt="text" title="text" width="x" height="y"/>

超链接

<a href="path" target="目标窗口位置">链接文本或者图像</a><!--target的常用值：_self _blank-->

链接的方式：

  • 页面间链接：从一个页面链接到另一个链接

  • 锚链接：

    <!--使用name作为标记-->
<a name="top">顶部</a>
<!--锚链接
1.需要一个锚链接
2.跳转到标记 #
-->
<a href="#top">回到顶部</a>
<a href="otherPage.html#dowm">跳转到其他页面的标记处</a>

  • 功能性链接

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

网页布局

行内元素和块元素

  • 块元素（p、h1-h6…）

    无论内容多少该元素独占一行

  • 行内元素（a、strong、em…）

    内容撑开宽度，左右都是行内元素的可以排在一行

列表、表格、媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，以列表的样式显示出来，以便浏览这更快捷地获得相应的信息

列表的分类

  • 无序列表
  • 有序列表
  • 定义列表
<!--有序列表-->
<ol>
    <li></li>
    <li></li>
</ol>
<!--无序列表-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--自定义列表-->
<dl>
    <!--列表名字-->
    <dt></dt>

    <dd></dd>
    <dd></dd>
    <dd> </dd>
</dl>

表格

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1.1</td>

    </tr>
    <tr>
        <!--rowspan 实现跨行-->
        <td rowspan="2">2.1</td>
        <td>2.2</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>

    </tr>
</table>

媒体元素

  • 视频元素

    video

  • 音频元素

  • audio

 <!--媒体元素-->

    <!--视频
    src:资源路径
    controls:控制条
    autoplay: 自动播放
    -->
    <video src="path" controls autoplay></video>

<!--音频
-->
    <audio src="path" controls autoplay></audio>

页面结构结构分析

元素名 描述
header 标记头部区域的内容（用于页面或页面的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的以块区域）
section web页面中的一块独立区域
article 独立的文章内容
aside 相关的内容或应用（常用于侧边栏）
nav 导航类辅助内容

iframe内联框架

<!--name 框架表示名-->
<iframe src="path" name="" frameborder="0" width="x" height="y"></iframe>

表单及表单应用

<!--表单
action:表单提交的位置，可以是网站，也可以是一个请求的地址
method :post get
-->
<form action="" method=""></form>
<!--文本输入框：type="text"-->
<p>名字： <input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit" >
<input type="reset">
</body>

表单提交方式

  • get

    可以在url中看到提交的信息，不安全，高效

  • post

    比较安全，传输大文件

文本框和单选框

表单元素格式

属性 说明
type 指定元素的类型。text password checkbox radio reset file hidden image button 默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中 
<!--
value: 单选框的值
name:   表示组

-->

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

    </p>

按钮和多选框

<!--多选框
type="checkbox"-->

<p>
    <input type="checkbox" value="reading" name="hobby">看书
    <input type="checkbox" value="movie" name="hobby">看电影
    <input type="checkbox" value="coding" name="hobby">写代码
    
</p>
<!--按钮-->
<p>按钮：
    <input type="button" name="" value="">
</p>

列表框文本域和文件域

<p>下拉框：
    <select name="列表名称" id="">
        <op value="" select=""></op>
        <op value=""></op>
        <op value=""></op>
        <op value=""></op>
        
        
    </select>
</p>

<!--文本域
-->
<p>文本：
    <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>

<!--文件域-->
<p>
    <input type="file" names="files">
    <input type="button" value="上传" name="upload">
</p>

搜索框滑块和简单验证

<!--邮件验证-->
<p>
    邮箱：
    <input type="email" name="email">
</p>
<!--url验证-->
<p>
    url:
    <input type="url" name="url">
</p>
<!--数字验证-->
<p>
    数字：
    <input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>
    滑块：
    <input type="range" min="0" max="100" name="" step="">
</p>
<!-搜索框-->
<p>
    搜索：
    <input type="search" name="">
</p>


<!-增强鼠标的可用性-->
<p>
   <label for="mark">点击文字跳转到文本框</label>
	<input type="text" id="mark">
</p>

表单的应用

  • 隐藏域

    hidden属性

  • 只读

    readonly属性

  • 禁用

    disable属性

表单初级验证

为什么要进行验证

  • 减轻服务器的压力
  • 保证数据的安全性

常用的方式

  • placeholder 提示信息
  • reqired 非空判断
  • pattern 正则表达式

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107593.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！