HTML基础

最新推荐文章于 2023-08-08 08:14:20 发布
最新推荐文章于 2023-08-08 08:14:20 发布
阅读量134 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongtianyu_/article/details/107582677
版权

HTML

Hyper Text Markup Language(超文本标记语言)

超文本包括：文字、图片、音频、视频、动画等

HTML5的优势：

1.世界知名浏览器厂商对HTML5的支持

例如;微软，Google，苹果，Opera,Mozilla

2.市场的需求

3.跨平台

W3C标准

W3C
➢World Wide Web Consortium (万维网联盟)
➢成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机
构
➢http://www.w3.org/
➢http://www.chinaw3c.org/
W3C标准包括
➢结构化标准语言(HTML、XML)
➢表现标准语言(CSS)
➢行为标准(DOM、ECMAScript )

基本结构

在这里插入图片描述

< body> < /body> 等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签(空元素)，如< hr/> ;意为用/来关闭空元素

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!--meto描述性标签,它用来描述我们网站的一些信息-->
<!--meto一殷用来做SE0-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java，西部开源">
<meta name="description" content="来这个地方可以学习Java">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体-->
<body>
Hello ,World!
</body>
</html>

网页基本标签

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签< /h3>
<h4>四级标签< /h4>
<h5>五级标签</h5>
<h6>六极标签</h6>

段落标签

<!--段落标签-->   
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尼巴</p>
<p> 真奇怪  真奇怪</p>

换行标签

<!--换行标签-->
跑得快<br/>
一只没有尾巴<br/>

水平线标签

<!--水平线标签-->
<hr/>

字体样式标签

<!--字体样式标签-->
<strong>加粗（加强）</strong><b>加粗</b><br/>
<em>倾斜（加强）</em><i>这也是斜体</i><br/>
<del>删除线</del> <s>删除</s><br/>
<ins>下划线</ins><u>下划线</u><br/>

注释和特殊符号

<!--注释标签和特殊字符-->
&nbsp;&nbsp;空格
&lt;小于号 
&gt;大于号
&copy;版权符
</body>
</html>

图像标签

常见的图像格式

JPG、GIF、PNG 、BMP…

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src :图片地址(必填)
相对地址(推荐使用)
../ --上一级目录
绝对地址：从根目录开始
alt :图片名字(必填）
-->
<img src="../resources/image/1.jpg" alt="头像" title="悬停 文字”width="300" height="300T>
</body>
< /html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<!--a标签
href :必项,表示要路转到那个页面
torget :表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.htal">点击我跳转到页面一</a>
<a href="https://www。baidu. com">点击我跳转到百度</a>
<br>
<!--锚链接-->
<a href="#top">回到顶部</a> 
<!--功能链接
邮箱链接:mailto:
-->   
<a href="mailto:3177741404@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>   
</body>
</html>

补充：

块元素

  • 无论内容多少,该沅素独占一行

  • (p、 h1-h6…)

行内元素

  • 内容撑开宽度,左右都是行内元素的可以在排在一行
  • (a、 strong 、em…)

列表

什么是列表

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

列表的分类

无序列表

有序列表

定义列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>

</head>
<body>
 <!--有序列表
应用范围:试卷，问答...
-->
<ol>
 <li>Java</1i>
 <li>Python</li>
 <1i>运雖</li>
 <li>前端</li>
 <li>C/c++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
 <li>Java</Li>
 <li>Python</li>
 <1i>运维</1i>
 <li>前端</1i>
 <li>C/c++</li>
</ul>   
<!--自定义列表
dl:标签
dt:列表标题
dd:列表内容
公司网站底部
-->
<dl>
 <dt>学科</dt>
  <dd>Java< /dd>
  <dd>Python</dd>
  <dd>Linux</dd>
  <dd>C</dd>
 <dt>位置</dt>
  <dd>西安</dd>
  <dd>重庆</dd>
  <dd>新疆</dd>
</dl>
</body>
</html>

表格

为什么使用表格

  • 简单通用

  • 结构稳定

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>

</head>
<body>
    <!--表格table
行tr  rows
列td
-->
<table border="1px">
 <tr>
     <!--colspan 跨列-->
  <td colspan="4">1-1</td>
  
 </tr>
 <tr>
     <!--rowspan 跨行-->
  <td rowspan>2-1</td
  <td>2-2</td>
  <td>2-3</td>
  <td>2-4</td>
 </tr>
 <tr>
  <td>3-1</td>
  <td>3-2</td>
  <td>3-3</td>
 </tr>
</body>
</html>

媒体元素

视频元素

video

<!--音频和视频
src :资源路径
controls :控制条
autoplay :自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>

音频元素

audio

<audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>

页面结构分析

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

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--iframe内联框架  
    src:地址
    w-h:宽度高度
    -->
 <iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>  
<a href="https:www.baidu.com" target="hello">点击跳转</a>
</body>
</html>

表单

<h1>注册< /h1>
<!--表单form
action :表单提交的位置，可以是网站,也可以是一 个请求处理地址
method : post，get 提交方式
  get方式提交：我们可以再url中看到我们提交的信息，不安全，高效，不能传输大文件
  post：比较安全，传输大文件。
-->
<form action="1.我的第一个网页.html" method="get">
   <!--文本输入框: input type="text"-->
   <p>名字: <input type="text" name="username"> </p>
   <!--密码框: input type="password"-->
   <p>密码: <input type="password" name="pwd"> </p>
   <p>
   <input type="submit">
   <input type="reset">
   </p> 
    
</form>

元素格式

属性
type指定元素的类型。text、 password、 checkbox、radio、 submit、reset、file、 hidden、 image 和button,默认为text
name指定表单元素的名称
value元素的初始值。type 为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否是被选中
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <!-- 一个完整的表单由表单域、表单控件（表单元素）、提示信息组成 -->
    <form action="" method="GET" name="name1">
        <!-- 表单元素 -->
        <!-- text：文本框 -->
        <!-- maxlength规定输入的字段中的字符最大长度 -->
        <!--readonly只读
            hidden隐藏
            disabled禁用
        <!-- label标签：用于绑定一个表单元素，当点击<label>内的文本时,浏览器会自动聚焦到对应的表单元素 label中的for值对应表单中的id-->
        <label for="user">用户名：</label><input type="text" id="user" name="username" value="请输入用户名" maxlength="6"><br>
        <!--password:密码框 -->
        <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label><input id="pwd" type="password" name="password"><br>
        <!--radio；单选框 -->
        <!-- name(列表名称)值一样才可以多选一 -->
        <!-- checked="checked"单选按钮和复选按钮可以设置 属性，当页面打开时就可以默认选定这个按钮 -->
        性&nbsp;&nbsp;&nbsp;别：<label for="nan">男</label><input id="nan" type="radio" name="sex" value="男"
            checked="checked"> <label for="nv">女 </label><input id="nv" type="radio" name="sex" value="女"><br>
        <!--checkbox 多选框 -->
        爱&nbsp;&nbsp;&nbsp;好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"
            checked="checked">打豆豆 <input type="checkbox" name="hobby"><br>
        <!-- submit提交按钮 -->
        <input type="submit" value="免费注册">
        <!-- reset重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 文件域：上传文件使用 -->
        上传文件：<input type="file"><br>
        <!-- select下拉表单 -->
        <!-- selected="selected" 当前项为默认选项 -->
        籍贯：<select name="" id="">
            <option >山东</option>
            <option >北京</option>
            <option selected="selected" >上海</option>
        </select><br>
        <!-- 文本域 -->
        说明：<textarea  cols="30" rows="5">6666</textarea>
    <!--邮件验证-->
<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="1">
</P>
<!--滑块
input type="range"
-->
<p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">    
</p>
 <!-- 搜索框 -->
    <p>搜索：
        <input type="search" name="search" >
    </p>
</form>
</body>
</html>

表单初级验证

常用方式

placeholder 提示信息

required 非空判断

pattern 正则表达式 （可以百度搜索已有的表达式）

街角棒棒糖
关注
专栏目录
HTML基础模板
qq_61690596的博客
07-18 2119
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML<head></head>中标签的含义
weixin_30871701的博客
05-30 789
我们都知道，HTML的标签可以分为很多种，head 里面的我们称为元信息类标签，诸如title、meta、style、link、base、script这些，他们用来描述文档的一些基本信息。 1. title 标签 可定义文档的标题。 <title> 标签是 <head> 标签中唯一要求包含的东西。 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标...
如何在页面中嵌入音频和视频？
最新发布
官方推荐
08-08 6591
如何在页面中嵌入音频和视频？
HTML 学习笔记——插入音频、视频标签
m0_55394328的博客
08-04 7655
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。html中插入音频和视频的方法基本相同，这里以音频为例进行演示音频格式：mp3、ogg、wav视频格式：mp4、ogv、webmaudio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。以上就是今天的学习笔记啦，希望对大家有帮助~...
如何在网页编写时添加音频视频，以及相关属性和用法
m0_67176957的博客
03-02 4199
先将音频添加至我们VSCode文件夹中 audio(音频):标签用来向页面中引入一个外部的音频文件【音视频文件引入时，默认情况下不允许用户自己控制播放停止】 除非添加一个属性controls 属性controls是否允许用户控制播放【特殊属性，不需要值】 属性autoplay音乐文件是否自动播放 如果设置了autoplay，则音乐在打开页面时会自动播放，但目前来讲大部分浏览器都不会自动对音乐进行播放 loop属性，音乐是否循环播放 <audio src=“添加路径” control...
说说如何使用 HTML5 嵌入音频和视频（媒体标签）
读万卷书，行万里路
07-25 1万+
HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。另外还提供了与这两个标签相关的 JavaScript API，这样就可以创建我们自己的音视频控件咯：<!-- 嵌入视频 --> <video id="player" src="xxx.ogg" poster="mymovie.jpg" width="300" height="200">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4848
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础（新手入门教程）
华夏天骄
05-17 5167
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
HTML中音视频的实现
qq_67413159的博客
03-13 5615
HTML中音视频的使用
HTML5新增的video元素与audio元素的使用方法
lixiuxiu2017的博客
03-17 3535
HTML4中如果要在网页上播放一段音频或视频，必须使用第三方插件比如flash，HTML4代码量太大，容易给服务器增加负担，造成宽带浪费，为了解决这些问题，HTML5中增加了video视频元素和audio音频元素功能（1）基础用法：①video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5...
html添加音频和视频
Alkali!的博客
07-11 3417
HTML 元素用于在文档中嵌入音频内容。 元素可以包含一个或多个音频资源， 这些音频资源可以使用 属性或者 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。使用src属性播放 示例： 与多个 元素 这个例子包含了多个 元素。如果能够播放的话，浏览器就会试图去加载第一个 元素；如果不行，那就退而求其次去加载第二个。 标签 HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将
HTML文档的基本格式/标签/学习笔记
热门推荐
No1banana的博客
01-20 1万+
一、HTML文档的基本格式 < doctype > 声明html文档的类型，位于文档的最开头，向浏览器说明文档的规范 < html >根标签。用于告知浏览器自身是一个html的文档 < head >头部标签。用于定义HTML文档的头部信息，head标签中可以嵌套</meta>< body >主体标签，用于定义网页的主要显示的内容，文本图片音频视频等。 注意：一个HTML文档当中只能有一对head标签、一对body标签、一对html标签。其中bod
如何在您HTML中嵌入视频和音频
07-31 949
by Abhishek Jakhar 通过阿比舍克·贾卡(Abhishek Jakhar) 如何在您HTML中嵌入视频和音频 (How to embed video and audio in your HTML) HTML allows us to create standards-based video and audio players that don’t require the use...
如何使用 HTML5 嵌入音频和视频（媒体标签）
施天琦的博客
10-15 4095
在HTML5中提供了audio 和 video这两个新标签来嵌入音频和视频内容。 另外还提供了与这两个标签相关的 JavaScript API，以此来创建我们自己的音视频控件： &lt;!-- 嵌入视频 --&gt; &lt;video&gt; &lt;source src="xx.mp4" type="video/mp4&gt; &lt;source src="xx.ogv" t...
html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法
weixin_34730055的博客
05-30 2870
HTML5 特性，包括原生音频和视频支持而无需 Flash。HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式：XML/HTML Code复制内容到剪贴板Yourbrowserdoesnotsupporttheelement.目前的...
如何在html5页面中嵌入音频 和视频？
Null_Bugs的博客
04-01 5658
HTML5包含嵌入音频文件的标准方式：支持的格式包括：MP3、Wav、和Ogg&lt;audio width="450" height="340" controls&gt;    &lt;source src="jamshed.mp3" type="video/mp4"&gt;        Your ^^&lt;/audio&gt;HTML5包含嵌入视频文件的标准方式：支持的格式
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值