HTML笔记

于 2021-09-01 19:59:25 发布
阅读量98 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bazinga23333/article/details/120033042
版权
本文详细介绍了HTML的基本标签，包括标题、段落、图像、链接等，并展示了如何使用列表、表格、音频视频元素以及页面结构和表单。此外，还提到了iframe内联框架的用法，以及各种交互式元素如表单的创建方法。
摘要由CSDN通过智能技术生成

文章目录

什么是HTML？

  • HTML：Hyper Text Markup Language超文本标记语言
    在这里插入图片描述

基本标签

标签作用
h标题标签
p段落标签
< br/>换行标签
hr水平线标签
strong粗体字标签
em斜体字标签
&nbsp空格
……

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--src:资源地址
    相对地址，绝对地址
    ../访问上级目录
    alt：在图片加载失败的时候，就会用文字代替
    title:鼠标悬停在图片上时，所显示的名字
    width height 图片的高和宽-->
<img src="../xxx.jpg" alt="oops!图像不见了" title="悬停文字">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像和链接标签</title>
</head>
<body>
<!--href：跳转页面的地址
    a标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开-->
<a href="myfirstHtml.html" target="_blank" title="123">跳转百度</a>
<a href="https://www.baidu.com" target="_blank" title="123">跳转百度</a>
<br/>
<a href="myfirstHtml.html" target="_blank" title="123">
	<img src="../xxx.jpg" alt="oops!图像不见了" title="悬停文字">
</a>
<br/>   
<!--锚链接
    1.需要一个标记锚
    2.跳转到标记
    #页面内跳转-->
<a name="top"></a>
<a href="#top">回到顶部</a>

<br/>
<!--也可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
    
<!--功能性链接
邮箱链接：mailto
qq链接
-->
<a href="mailto:xxxxxxqq.com">点击联系我</a>

<a target="_blank"
   href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"/>
    <a target="_blank"
   href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里加我领取小电影"
         title="点击这里加我领取小电影"/>
</body>
</html>

块元素

  • 无论多少内容，该元素都只占一行
  • （p、h1-h6…）

行内元素

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

列表

有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

无序列表

<ul><!--无序列表-->
    <li>
        <ul>
        <li>1</li>
        <li>1</li>
        <li>3=1</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</ul>

自定义列表

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<dl>
    <dt>学科</dt>
    
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dt>语言</dt>
    <dd>中文</dd>
    <dd>英语</dd>
    <dd>日语</dd>
    
    <dt>学校<dt/>
    <dd>PKU<dd/>
    <dd>Tsinghua<dd/>
    <dd>...<dd/>
</dl>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--表格table
    行 tr
    列 td
    -->
<table border="1px">
    <tr><!--跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr><!--跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

音频和视频元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--视频
		src 资源路径
        controls 控制条
        autoplay 自动播放
-->
<video src="xxx/xxx/xxx/examp.mp4" controls autoplay></video>
<!--音频
	src 资源路径
	controls 控制条
    autoplay 自动播放
-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
</body>
</html>

页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<!--页面头部-->
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h：宽度高度
name:框架标识名
 -->
<iframe src="//player.bilibili.com/player.html?aid=890100424&bvid=BV18P4y1p7Ma&cid
=394258751&page=1" scrolling="no" border="0"frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe src="path" name="mainFrame" ></iframe>

</body>
</html>

表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
        action：表单提交的动作，表示向何处发送表单数据。可以是交给一个网址，也可以是交给一个请求处理地址
        method：post get请求方式
        get:方式会在url里面看到我们提交的信息，不安全
        post:比较安全，比较。。。可以传输大文件
        -->
<form action="xxx/xxx" method="get">
    <!--文本输入框：input type="text" 通常会进行命名
	value:默认初始值
	maxlength：最长能写的字符数量
	size:文本框长度
-->
    <p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="8" size="20"></p>
    
    <p>密码：<input type="password" name="password" placeholder="请输入密码" required="required"></p>
    
    <!--    submit提交表单，reset清空-->
    <p><input type="submit"> <input type="reset">
    </p>
    
    <!--    radio单选框标签 
    value：单选框的值
    name：表示组，在同一个组内的radio标签同时只能选中一个
    checked:默认被选中
    -->
    <p>性别：<input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="b" name="hobby">唱
        <input type="checkbox" value="s" name="hobby">跳
        <input type="checkbox" value="d" name="hobby">Rap
    </p>
    <br/>
    ><!--按钮
    input type="button"：普通按钮
    input type="image"：图片按钮
    input type="submit"：提交按钮
    input type="reset"：重置
-->
    <p><input type="button" name="btn1" value="按钮上文字"
        <input type="image" src="xxx/xxx">
    </p>
    <p><!--下拉框：selected:默认选项-->
        你来自：
        <select name="location">
            <option value="china">中国</option>
            <option value="us" selected>美国</option>
            <option value="japan">日本</option>
        </select>
    </p>

    <p><!--文本域-->
        反馈：
        <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
    </p>
    <p><!--文件域-->
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--邮件：会简单验证是否是邮箱地址
		url：会简单验证是否是网络地址
        number：数字验证-->
    <p>邮箱：<input type="email" name="email">
        url：<input type="url"></p>

    <!--数字验证
           max最大数量
           min 最小数量
           step 每次点击增加或减少的数量-->
    <p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>

    <!--滑块-->
    <p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
    
    <!--搜索框-->
    <p>搜索：<input type="search" name="search"></p>

    <p><!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    <p>自定义邮箱
    <input type="text"  name="diymail" pattern="去查正则表达式">
    <p/>
</form>
</body>
</html>
Bazinga23333
关注
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
html笔记.doc
01-29
在这个HTML笔记中，主要涵盖了关于HTML和CSS的一些关键知识点，包括元信息设定、文本格式化、列表创建、表格构建、样式定义以及表单元素等。 首先，`<meta charset="UTF-8">`是一个非常重要的元标签，它定义了文档...
韩顺平html笔记
07-18
在韩顺平的HTML笔记中，我们可以学习到关于HTML的基础知识，包括文本格式化、超链接、图片元素以及表格的创建。以下是这些知识点的详细说明： 1. **文本格式化**： - `<font>`标签：在HTML4中，`<font>`标签用于...
韩顺平HTML笔记
10-20
HTML笔记不错的哦，与大家一起分享 Html的基本结构 <html> <元素 属性1=”值” …./> <元素 属性1=”属性值” 属性2=“属性值” …>内容元素> <元素 属性=”属性值”/> </html> 说明 1. 标记通常是成对出现 ...
html笔记.rar
04-02
这本“html笔记”压缩包文件显然是针对HTML基础知识的整理，旨在帮助学习者掌握HTML的核心概念和使用技巧。 HTML由一系列元素组成，每个元素都由标签定义。这些标签告诉浏览器如何呈现网页内容。例如，“<html>”是...
HTML笔记传智讲师视频笔记适合初学者
04-16
"HTML笔记传智讲师视频笔记适合初学者"这个标题暗示了这是一份针对初学者的教程资料，可能包含了从基础到进阶的HTML知识，通过传智讲师的教学方式来讲解。 描述中的"html学习笔记"表明这是关于HTML学习的过程记录，...
HTML笔记(完整版).md
08-14
该笔记适合0基础学员学习，希望对各位学者有所帮助！
html笔记心得
09-01
/*zheshi style注释，abc是名字，不要以数字开头*/ #abc{border:red outset 10px} <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 无标题文档 </head>
HTML笔记.xmind
12-30
个人整理HTML基础笔记
HTML笔记-个人笔记
04-13
X-mind格式，个人笔记
HTML笔记总结
09-13
主要是个人总结笔记，博主主要是为了存储，如果有需要的同学还没有分的可以邮箱联系我605037699@qq.com
HTML笔记(20220104194236).pdf
最新发布
11-28
HTML笔记(20220104194236).pdf
html笔记(20220104202912).pdf
11-28
html笔记(20220104202912).pdf
HTML笔记(20220104202926).pdf
11-27
HTML笔记(20220104202926).pdf
html笔记(20220104203448).pdf
11-27
html笔记(20220104203448).pdf
Html笔记(20220104213806).pdf
11-27
Html笔记(20220104213806).pdf
张孝祥主讲经典HTML笔记：从基础到高级
本文档是一份由张孝祥主讲的HTML笔记，内容涵盖了JavaScript网页编程的基础课程，包括HTML语言的基础、高级概念、CSS、JavaScript语法、DOM对象模型编程以及脚本编程技术汇总。此外，还涉及到正则表达式的应用。文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值