HTML学习笔记

最新推荐文章于 2022-11-05 10:24:37 发布
最新推荐文章于 2022-11-05 10:24:37 发布
阅读量631 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44920980/article/details/113340069
版权

初始HTML

Hyper Text Markup Language（超文本标记语言）

在这里插入图片描述
在这里插入图片描述

网页的基本信息

<!--DOCTYPE：告诉浏览器使用的规范-->
<!DOCTYPE html>
<!--lang：表示浏览器使用的语言-->
<html lang="en">
<head>
    <!--头部标签
       <head>
       meta：描述性标签，它用来描述我们的网站的一些信息：比如字符编码、关键字、描述网站作用。
            <meta charset="UTF-8">
            <meta name="keywords" content="IT教育，Java学习">
            <meta name="description" content="描述网站的作用">
                    title：保存网页的标题
            <title>Title</title>
        </head>
    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="IT教育，Java学习">
    <meta name="description" content="描述网站的作用">
    <title>Title</title>
</head>
<body>
<!--主体标签
    网页上的所有类容都在这个标签中
-->
</body>
</html>

网页的基本标签

  1. 标题标签

  2. 段落标签

  3. 换行标签

  4. 水平线标签

  5. 字体样式标签

  6. 注释和特殊符号
Title

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题
   <hr>
   <hr>
   <!--段落标签-->
   <p>学习HTML1</p>
   <p>学习HTML2</p>
   <p>学习HTML3</p>

   学习HTML1<br/>
   学习HTML2<br/>
   学习HTML3<br/>

粗体：粗体标签

斜体：斜体

   <br>
   空格：空&nbsp;&nbsp;&nbsp;&nbsp;格
   大于号：&gt;
   小于号: &lt;
   版权符号：&copy;

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
src:图片路径，可以是相对路径、绝对路径、网络路径
alt:图片描述，用于图片加载不出来显示
title："鼠标悬停显示文字"
width：宽
height：高
-->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</body>
</html>

超链接标签及其应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a 标签
href: 必填，表示要跳转的页面。
target: 表示窗口在哪里打开
       _blank 在新页面中打开
       _self    在自己的页面打开
-->
<a name="top">顶部</a>
<a href="https://www.baidu.com" target="_blank">跳转百度</a>
<br>
<!--图片超链接-->
<a href="https://www.baidu.com" target="_self">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>

<!--功能性链接
邮件链接：mailto
QQ链接：QQ推广自动生成
-->
<br>
<a href="mailto:30597117@qq.com">点击联系我</a>
<!--锚链接
    1.需要一个标记
    2.跳转到标记
    #
-->
<br>
<a href="#top">回到顶部</a>

</body>
</html>

块元素和行内元素

块元素：无论内容多少都独占一行。

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

列表

  • 有序列表
  • 无序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
</ol>

<!--无序列表
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c/c++</dd>
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格标签
    table:标签
    行：tr
    列:td
    跨行：rowspan
    跨列：colspan
-->
    <table border="1px">
        <tr>
            <td colspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    音频和视频：audio/video
        src: 资源路径
        controls: 控制条
        autoplay: 自动播放
-->
<audio src="https://win-web-nf01-sycdn.kuwo.cn/2e9e1add78f34ed2c58f9241096da049/6005a74b/resource/n3/64/88/986676456.mp3" autoplay controls></audio>
<video src="https://apd-dd1ae084eb14697cf7b9488d43068b48.v.smtcdns.com/om.tc.qq.com/AN-9jOv30jhozvKsaibNCI2JTDbxxpqUJdNAJm58zAN4/uwMROfz2r5zIIaQXGdGnC2dfJ7wFnocHIQhYHck9TxbRMoti/a0373e06inx.p712.1.mp4?sdtfrom=v1010&guid=6ecf73cb0076f75adfe88536edeb6611&vkey=F5BFC3415CEFABBA06357B0BC6665FDE2634A4E641A930E043D7817D9D1CEF14681200D785DA6017EB6678121876212C8E451802265533FA026E78580E82A550105F86B77BA10763571A1D61BDF8CA431D4B7C209687148A22507965141EE70925C4872E4C860E725B2E056AF4457179F0E51D1004299B000B0CA550FB619FFD" controls autoplay></video>
</body>
</html>

页面结构分析

header：标记头部区域的类容

footer：标记脚部区域的内容

section：Web页面中的一块独立区域

article：独立文章内容

aside：相关类容或应用（常用于侧边栏）

nav：导航栏辅助内容

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>

表单语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站、也可以是一个请求处理地址
method：post、get 提交方式
    get方式提交：可以在url中看到我们提交的信息，不安全，高效。
    post：比较安全、可以传输大文件。
-->
<form action="HTML基本信息.html" method="get">
    <!--    input
type:
    text:文本框
    password：密码框
    submit:提交按钮
    reset:重置按钮
    checkbox:单选框
    radio:多选框
    file:文件
    hidden:隐藏
    image:图片
    button:按钮
value:默认初始值
maxlength:最长能写几个字符
size:文本框长度
readonly:只读
checked disabled：禁用
hidden：隐藏域
placeholder="请输入用户名"：提示信息
required: 非空判断
pattern：正则表达式验证
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
    <p>名字：<input type="text" name="username" value="admin" readonly></p>
    <p>密码：<input type="password" name="pwd" disabled></p>
<!--单选框： 性别
    value:尽量填上
name：属性必须一样才能实现单选
-->
    <p>
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
<!-- 多选框：爱好
    value:尽量填上
    name：属性一个分组
   -->
    <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>
<!--    按钮
    input type="button"     普通按钮
    input type="image"      图片按钮
    <input type="submit">   提交按钮
    <input type="reset">    重置按钮
-->
    <p>
        <input type="button" name="按钮名称" value="按钮显示名称">
        <input type="image" src="1.jpg">
    </p>
<!--    下拉框、列表框

-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

<!--    文本域
    cols:行
    rows:列
    -->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
<!--    文件域

-->
    <p>
        <input type="file" name="files">
    </p>

<!--    输入验证-->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
    </p>
    <p>
        邮箱：
        <input type="email" name="email">
    </p>
    <p>
        URL：
        <input type="url" name="url">
    </p>
    <p>
        数字：
        <input type="number" name="num" max="100" min="0">
    </p>

<!--    增强鼠标可用性-->
    <p>
    <label for="mark">点击我试试</label>
    <input type="text" id="mark">
    </p>
<!--    滑块-->
    <p>滑块：音量
        <input type="range" name="voice" min="0" max="100">
    </p>
    <p>搜索框：
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>
橘子有点甜^_^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html基础学习
weixin_52676304的博客
10-15 3626
html新手学习，以菜鸟教程为主
HTML基础
qq_44801321的博客
08-14 3581
W3C标准 结构化标准语言（HTML,XML）. 表现标准语言（CCS）. 行为标准语言（DOM，ECMAscript） HTML基本结构 <body> <-body>等成对的标签分别叫做开放标签和闭合标签 单独出现的叫自闭合标签 <!--DOCTYPE用来定义标准--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!--meta描述
html头部中各式各样的meta
weixin_30668887的博客
06-05 213
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
html标题的使用
weixin_63607527的博客
03-08 281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>王薪.
html学习笔记
06-22
1.属性，hidden 属性是布尔属性。 注释：在 XHTML 中，属性简写是禁止的，hidden 属性必须定义为 。2.事件
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
黑马VUE快速入门笔记
只要学不死，就往死里学！！！
01-12 2313
vue官网https://cn.vuejs.org/ 我的第一个vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue基础</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/
前端面试题（带文字＋代码解析），我不相信你看不懂（2022.11.04）
随便写写
04-06 6581
前端面试题，我发现很多小伙伴都是死背面试八股，原理并不懂，遇到需要思考的题就懵了，所以，我会一道道从文字和代码解析前端的面试题，让大家理解，并且加强自己的水平，天天都会更新
-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat:GitHub隐私声明-GitHub Docs <title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> <link rel =“ alternate icon” type =“ imagepng” href =“ a
03-24
-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat <！doctype html> <html lang =“ zh-CN”> <head> <meta charset =“ utf-8” /> <title> GitHub隐私声明-GitHub Docs </ title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1“> <link rel =” alternate icon“ type =” image / png“ href =” / assets / images / site / favicon.png“> <link rel =” icon“ type =“ image /
js 收银元小程序
weixin_30594001的博客
08-21 281
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js考试</title></head><script type="text/javascript">// 1.编写一个程序，计算增加后的工资。要求基本工资大于等于100...
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 5858
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
HTML - DOCTYPE和lang以及字符集的作用
qq_33962481的博客
05-11 3809
文章目录一、使用VSCode生成骨架标签二、新增代码解释1. ``标签2. lang : 语言3. charset : 字符集 一、使用VSCode生成骨架标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
Vue基础知识总结 3：vue常用标签
热门推荐
学Java，找哪吒
07-19 1万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
三、html基础—特殊标签
m0_46960665的博客
06-07 2815
一、实体 1、 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 2、 在HTML中有些时候，我们不能直接书写一些特殊符号 比如：多个连续的空格，比如字母两侧的大于和小于号 3、 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符） 实体的语法： &实体的名字; &nbsp; 空格 &gt; 大于号
Html基础学习
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
11-05 948
HTML基础
【转】ASCII码表在线查询
weixin_33727510的博客
05-06 902
原文网址：http://www.litefeel.com/tools/ascii.php ASCII码对照表 下表列出了字符集中的 0 - 127 (0x00 - 0x7F)。 十进制十六进制字符 十进制十六进制字符 0 0x00     32 0x20 [空格] 1 0x01   33 0x21 ! 2 0x02   3...
前端的学习之路：初级HTML---meta标签
weixin_44647555的博客
02-01 731
meta标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>meta标签</title> </head> <body> <!--
黑马html学习笔记
最新发布
09-15
以下是一些HTML学习笔记的内容： 1. HTML的全称是超文本标记语言，它用于创建网页和网页应用程序的结构。 2. HTML使用标签来定义页面的不同元素。例如，标签用于定义一个标题，标签用于定义一个段落等。 3. HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值