HTML学习笔记01-常用标签及属性
2024-06-11 08:22:27
<!--声明是html5文件-->
<!DOCTYPE html><!--声明语言类型-->
<html lang="en" xmlns="http://www.w3.org/1999/html"><!--head的内容除了title外，其他内容在网页上都不会显示-->
<head><!--meta必须在head内，且大小应小于1024B，可以有很多meta元素，meta可以表达很多内容诸如：编码/作者/关键词/跳转网页等，如下：--><meta charset="UTF-8"><!-- meta标签 name属性 必须跟一个content属性用来表明前面name的内容--><meta name='author' content="文件的作者信息"><meta name='keywords' content="文件的关键词，方便搜索软件搜索，如果有多个关键词彼此间用逗号隔开，如：姓名，年龄，地址"><meta name='description' content="文件的描述，该描述内容会出现在搜索软件中"><meta name='generator' content="文件用什么软件生成"><meta name='revised' content="文件版本最新信息"><!--meta http-equiv 属性 --><!-- 经过5秒后刷新该页面 --><meta http-equiv="refresh" content="5"><!--经过5秒后跳转到www.baidu.com--><meta http-equiv="refresh" content="5;http://www.baidu.com"><!--在head标记只能设定一次title，标题会出现在浏览器标题/浏览器标记列/浏览器记录及收藏列表中 --><title>范枝洲正在学习HTML+CSS</title><!--base 设置路径基准位置,一下代码将HTML文件夹设置为基准base位置,故该HTML中的相关的子文件夹/父文件夹均以此为基准-->
<!-- <base href="C:\Users\User\PycharmProjects\Django\mywebsite\templates">--><!--结束标签-->
</head><!--body是网页主体，这里面的内容会在页面上显示-->
<body><!--header区指文件首页区，指的是网页或文件上方的区域，通常将网页大标题/简单批注说明等数据放在此区--><header><h1>接下来要吟诗一首</h1><p>来一首陶渊明的歌</p></header><!--section：使用section标记多个区域，如数个段落或者多个小标题, 该区块内的H标签会被自动降1级，如H1会被降级为H2--><section><!--Hn标签，表示段落标签，n取值为1-6，后面的数据会自动换行--><h1>自动降级后的-标题1</h1><h2>自动降级后的-标题2</h2><h3>自动降级后的-标题3</h3><h4>自动降级后的-标题4</h4><h5>自动降级后的-标题5</h5><h6>自动降级后的-标题6</h6><!--hr: 输出一条水平线--><hr><!--br 为换行符; em为斜体; id是全局属性:可以在很多元素内使用,主要用于标记--><h4 id="mybook">《饮酒·其五》</h4>--<em>陶渊明</em><br><!--p表示一个段落: 段落结尾自动换行--><p>结庐在人境，而无车马喧。<br>问君何能尔？心远地自偏。<br>采菊东篱下，悠然见南山。<br>山气日夕佳，飞鸟相与还。<br>此中有真意，欲辨已忘言。<br></p><hr><!--保持原文格式： pre， 常用对格式要求较高的诗词或者代码--><pre>#从1打印到10for i in range(1，11):print(i)</pre><hr><!--斜体<em> 和<i> , i 不仅表示斜体，还代表声音/情感/思考/船舶名/或不同的语言类别。 --><!-- 底纹 mark：高亮显示--><p><mark>斜体介绍:</mark><br> <p>i</p> <i>不仅表示斜体，还代表声音/情感/思考/船舶名/或不同的语言类别。em虽然也是将所标识的文字以斜体显示，但是此元素的语义重点是强调，如果表示重要内容则建议使用strong元素.</i><br>cite元素<cite>可以让内容以斜体显示，主要用在引用源的标题</cite>。<br>q元素可以让内容前后自动加上<q>引号</q>，主要用在引用短篇文章火段落元素时。如果引用的短文位于英特网，则应使用cite元素。<br>blockquote主要用于引用长篇文章，<blockquote>所引用的文章会有缩排和换行效果，如果引用的短文位于英特网，则也应使用cite元素</blockquote><br></p><hr><!-- kdb:显示计算机键盘或语音输入的内容；samp：显示计算机程序产生的结果；var：显示变量如长须语言的变量和数据公式的变量；code：显示程序语言，HTML，CSS元素的名称和属性等 --><h3>显示与计算机有关联的文字kbd/samp/var/code元素</h3><br><p>打开网页在用户名处输入<kbd>username</kbd> 再输入密码； 修改的变量<var>data</var>的值，然后窗口会提示<sanp>修改成功</sanp></p><p>CSS主要是使用<code>style</code>进行设计与排版</p><pre><code>for i in range(10):print(i)</code></pre><hr><!--abbr 用于定义缩写，鼠标放在网页上会显示全写--><p>百度/腾讯/阿里简称：<abbr title="baidu tengxun, ali">BAT</abbr></p><!--dfn：用于定义用语，数据将以斜体输出--><p><dfn>范枝洲</dfn>是这篇笔记的主人</P><!--ins表示新增内容，将以下划线的方式表示；del表示要删除的元素，将以删除线的方式处理--><p><ins>这是新增内容</ins>,<del>这里需要删除</del></p><!--bdi: 强制从左到右，否则遇到阿拉伯文，则显示是从右到左；目前ie不支持该元素，只有chrome和opera支持--><p><bid>范枝洲</bid>:20，<br><bid>John</bid>:20<br><bid> عرب عربى</bid>:20<br>:20 عربي/عربى<br></p><!--指定文字走向：bdo-，--><p><bdo dir="ltr">从左到右</bdo></p><p><bdo dir="rtl">从右到左</bdo></p><!--ruby元素可以为每个汉字加上注意或者拼音；rt元素是ruby的子元素，放置的是拼音，rp元素也是其子元素当浏览器不支持ruby时显示rp元素内容，不过现在几乎所有浏览器都支持ruby了--><p><ruby>范枝洲<rt>fan zhi zhou</rt></ruby></p><!--sup：商标元素，比如x^3; sub:下标元素如H2O--><p>X<sup>3</sup>表示X的三次方</p><p>H<sub>2</sub>O表示水</p><!--特殊字符--><p>空格： </p><p>小于：<</p><p>大于：></p><p>引号："</p><p>&：&</p><p>英镑：£</p><p>日元：¥</p><p>欧元：€</p><p>版权：©</p><p>注册商标：®</p></section><hr><section><!--设计含有超链接的网页--><p>超链接的主要作用：1. 从网络的某一结点条到另一节点；2.从一个HTML文件跳到另一个HTML文件；3.在同一个HTML文件中，从某一段跳到另一段落，类似书签</p><a href="https://www.baidu.com">点击我，跳转到百度</a><!--target:指定跳转页面是新增窗口打开还是不是，还是其他打开方式--><!--self系统默认，在当前页面打开 --><p><a href="https://www.baidu.com" target="_self">点击我，跳转到百度，当前页面打开</a></p><!--blank新增页面打开 --><p><a href="https://www.baidu.com" target="_blank">点击我，跳转到百度,新建页面打开</a></p><!--top 在目前浏览器的最顶端显示 --><p><a href="https://www.baidu.com" target="_top">点击我，跳转到百度，在目前浏览器的最顶端显示</a></p><!--parent 如果当前的页面有父级，则在父级层面显示 --><p><a href="https://www.baidu.com" target="_parent">点击我，跳转到百度，如果当前的页面有父级，则在父级层面显示</a></p><!--建立网页时，很可能建立许多页面，每一个页面其实就是一个html文件，下面将说明如何在不同html文件之间跳转，分为相对路径和绝对路径两种场景--><!-- 1. 所有HTML都在同一个文件夹 --><a href="APP01.html">点击我,显示另一个html文件内容</a><!-- 2. 其他HTML在子文件夹 --><p><a href="当面目录中其他文件夹的名字/APP01.html">点击我,跳转其他子文件夹html文件内容</a></p><!--3. 其他HTML在父文件夹 --><p><a href="../APP01.html">点击我,跳转到父目录的html文件</a></p><!--4. 绝对路径 --><p><a href="file:///d:/APP01.html">点击我,显示绝对路径下的另一个html文件内容</a></p><!--5. 同一个文件中的超链接:首先要使用id属性标记需要跳转到的位置,然后生成超链接 --><p> <a href="#mybook">点击我,跳转到当前html页面陶渊明一节</a></p></section><hr><section><!--无序列表--><ul><li>无序列表</li><li>无序列表</li></ul><!--有序列表,start表示列表从什么值开始,取值必须是int,包括0,系统默认n=1,type表示序号类型,取值为:1/a/A/i;reserved表示逆序递减--><ol start="-1" type="A" reversed="reversed"><li>有序列表</li><li>有序列表</li><!--value 用于更改列表的取值 --><li value="4">有序列表</li></ol><!--自定义清单,类似小标题--><dl><dt>在dt中定义一个名词用于,如 HTML</dt><dd>定义对名词HTML的说明,如,HTML是xxxxx</dd></dl></section><hr><!--设计表格--><section><p>这一节介绍表格</p><p>border表示外框线的宽度</p><table border="1"><caption>表格标题:HTML5+CSS3学习</caption><colgroup><colstyle="background-color:green"><col span="2"style="background-color:lightgray"></colgroup><thead><tr><th colspan="3">表格标签介绍</th></tr><tr><th>标签</th><th>功能说明</th><th>备注</th></tr></thead><tbody><tr><td>caption</td><td>表格的标题,再table中任意位置均能再表格前面形成标题,但是建议再table之后tbody之前</td><td></td></tr><tr><td>colgroup</td><td>单元格的群组化,其位置必须在caption之后,thead/tbody/tfoot/tr之前</td><td></td></tr><tr><td>col</td><td>col是colgroup的子元素,有属性span=n,n默认为1,表示需要定义的列数,他没有结束标签</td><td></td></tr><tr><td>table</td><td>表格的开始标记,所有表格规划就是在这个标签中</td><td></td></tr><tr><td>thead</td><td>建立表头,也就是表格的标题行,在表头内通过th定义表头的单元格</td><td rowspan="2">这里使用了rowspan=2纵向合并</td></tr><tr><td>tbody</td><td>定义表体部分</td><td></td></tr><tr><td>tr</td><td>定义具体的行</td><td></td></tr><tr><td>td</td><td>通常位于tbody或tfoot中中,定义单元格</td><td></td></tr><tr><td>tfoot</td><td><a href="http://www.baidu.com">表尾:做一份整体表格的注记,不懂就点击我,送你去百度</a></td><td></td></tr></tbody><tfoot><!-- 图片的大小将依照宽度自动调整--><tr><td><a href="https://tenor.com/view/digibyte-dgb-ball-3d-meme-gif-20139201"><img src="/static/images/blueball.gif" width="12"></a>google logo</td><td colspan="2"><img src="/static/images/google.png" width="100">插入图片到表格.注意google logo多了个小不点<img src="http://gifgifs.com//animations/sports/track-and-field/Golden_runner.gif" border=0 alt="http://gifgifs.com" ></td><td></td></tr><tr><td colspan="3">这是表尾tfoot,是对这张表格的描述,需要注意的是,这里再td标签中应用了colspan=2属性,表示横向合并两个单元格</td></tr></tfoot></table></section><hr><section><p>img没有结束标记,格式为"img src=图片的URL,HTML5图片格式为gif/png/jpg/svg/pdf等,当某些原因图片不能显示时通过alt显示其替代的文字:alt=替代的文字 height=高度 width=宽度"</p><img src="/static/images/google.png" alt="我也不知道为什么打不开" height="100" width="200"><br><img src="/static/images/google.png" alt="我也不知道为什么打不开"><figure><figcaption>pdf文件如下:这种方式表格也适用,这种方式会换行哦</figcaption><img src="/static/files/TCP-IP详解(卷一、二、三).pdf" alt="这是个pdf文件,我不知道能不能打开"></figure><!--制作响应地图 --><img src="/static/images/world-map.gif" usemap="#Map" alt="我也不知道为什么打不开"><map name="Map"><area shape="circle" coords="100 100 100" href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%9C%B0%E5%9B%BE/2693620?fr=aladdin" alt="中国地图"><!--以上shape表示形状,可选值为circle圆圈,rect矩形,poly多边形,default,默认行为; coords是对应形状的取值,对于圆形需要原点坐标和半径;对于矩形需要左上角对角线端点坐标对于多边形,按照顺时针提供能构成封闭图形的点--></map></section><hr><section><p>这一节将多媒体网页</p><p>HTML支持的视频格式:MP4/OGG/WEBM</p><pre>video属性如下:1. src:指定video路径;2. poster:视频播放前的图片, 换句话说就是海报3. preload: 这个属性用于设定当浏览者进入网页时是否需要预览下载影片.有以下三种值可选:3.1 auto: 预设值,由浏览器决定;通常PC设备的浏览器因为带宽使用方便会直接下载,但是移动设备的浏览器因为网络流量牵涉费用比较哦啊昂贵,所以不会实现下载3.2 metadata: 值下载meta数据,如播放时间/影片尺寸/第一个画格图片和影片标题等3.3 none: 不下载4. autoplay:如果设定这个属性,则当影片加载完成就自动播放.5. mediagroup: 如果要同时播放多个影片,且文件的URL相同时,可以用这个属性组成群组方式播放6. loop:若使用这个属性,影片会重复循环播放7. muted: 若使用这个属性,影片播放时会静音8. controls: 若使用这个属性,影片播放时会出现播放控制器,类似电视遥控器9. height/width: 高度和宽度设置,若设置其中一个值,另一个会自动设置,建议只设置宽度.</pre><H1>看美女视频</H1>
<!-- <video src="/static/videos/girl01.MP4" width="300" poster="/static/images/google.png" controls loop ></video>--><!-- 但是也可以用source替换src, source可以指定多个文件,按序匹配是否可以执行,一旦确认文件可以执行,将忽略后面的文件.--><hr><P>使用source替换src:</P>><pre>MIME可以让浏览器判断是否可以执行,常见配置格式为 src="" type="type/subtype",详见格式如下:一 常见type格式:1. text:文本2. image:图片3. audio:声音4. video:影片二 subtype格式1. text/plain:存文本2. text/html: html文件3. image/gif: gif图像4. image/png: png图像5. image/jpeg: jpeg图像6. video/MP4:7. video/ogg:8. video/webm</pre><video width="300" poster="/static/images/google.png" controls loop ><!--下面这一行是错误的格式名称,不会被执行,会继续寻早第二条执行--><source src="/static/videos/girl01.MP4" type="video/mp24"><source src="/static/videos/girl01.MP4" type="video/mp4"><P>浏览器不支持此类型的文件</P></video><H1>听听音乐</H1><P>声音audio和video属性用法一样,支持的格式MP3/OGG/AAC/MP4/M4A/</P><audio src="/static/videos/Wonderful+U+-+张含韵.mp3" controls autoplay loop></audio><p>使用object嵌入mp3 到网页,也可以设置height="0" width="0"</p><object data="/static/videos/Wonderful+U+-+张含韵.mp3" ></object><p>iframe建立浮动框架</p><pre>1. src:定位要展示的资源2. srcdoc:如果浏览器支持该参数,将覆盖src的功能3. name:设定框架的名称.如果用a元素的target属性引用此名称,就可以执行超链接.利用这个特性,可以进行多个HTML文件的超链接.</pre><ul><li><a href="/static/videos/girl01.MP4" target="iframe">girl01.mp4</a> </li><li><a href="/static/videos/blue_movie.mp4" target="iframe">blue_movie.mp4</a> </li></ul><H1>iframe展示</H1><iframe src="/static/images/google.png" width="600" height="400" name="iframe"><P>如果用户浏览器不支持iframe元素,将显示此信息</P></iframe></section><section><hr><p>开始学习如何制作输入表单,这一节很重要</p></section><!--small: 可以让字变小，主要应用场景在于批注信息，例如网页脚注区的法律声明/警告声明/著作权声明等-->
<!--footer指网页火文件下方的区域，通常会将公司联络信息/版权信息火相关链接放在此区域-->
<footer><br><p><small>CopyRight 2021, 范枝洲</small></p><!--address: 主要显示个别内容或是整个网站内容的联络信息,比如又是需要在网页下凡共设置联系信息,便可以使用这个元素--><address>欢迎来范枝洲的博客<br><a href="Mailto:xxx@xxx.com">邮件联系,标准格式</a><br><a href="Mailto:xxx@xxx.com?subject=consulation">邮件联系,增加主题</a><br><a href="Mailto:xxx@xxx.com?cc=bbb@xx.com">邮件联系,增加抄送</a><br><a href="Mailto:xxx@xxx.com?bcc=bbb@xx.com">邮件联系,增加加密抄送</a><br><a href="Mailto:xxx@xxx.com?body=hello">邮件联系,增加邮件内容</a><br></address></footer><!--结束标签-->
</body><!--结束标签-->
</html>
HTML学习笔记01-常用标签及属性相关推荐
- HTML笔记——②HTML常用标签、属性
本系列笔记为nmy专属定制修改 HTML笔记--②HTML常用标签 一 HTML的标签 1.1 标签分类 1.2 HTML5 代码规范 二 HTML常用标签 2.1 标题与段落 2.2 文本修饰标签 ...
- HTML学习笔记_常用标签的使用及注意事项
html学习笔记 本文根据B站pink老师的视频整理而成,包含常用标签的使用及注意事项. 注意:本篇文章排版不好看,不方便大家阅读,重新排版后的文章在这里:HTML学习笔记 | 常用标签的使用及注意事 ...
- matlab 轴gui,MatlabüGUI学习笔记（4）——公共对象属性的轴,MatlabGUI,四,常用,之,Axes...
Matlab_GUI学习笔记(四)--常用对象的属性之Axes 1. Axes Axes意为"轴",是axis的复数.使用get函数查看Axes对象的属性,有一些属性与Figure ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 【Mybatis】学习笔记01：连接数据库，实现增删改
需要数据库SQL的请跳转到文末 哔哩哔哩 萌狼蓝天[转载资料][尚硅谷][MyBatis]2022版Mybatis配套MD文档[Mybatis]学习笔记01:连接数据库,实现增删改[Mybatis]学 ...
- Servlet和HTTP请求协议-学习笔记01【Servlet_快速入门-生命周期方法、Servlet_3.0注解配置、IDEA与tomcat相关配置】
Java后端 学习路线 笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
- XML学习笔记01【xml_基础、xml_约束】
Java后端 学习路线 笔记汇总表[黑马程序员] XML学习笔记01[xml_基础.xml_约束][day01] XML学习笔记02[xml_解析][day01] 目录 01 xml_基础 今日内容 ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
最新文章
- webpack打包处理js文件中的高级语法
- macOS下nginx配合obs做推流直播.md
- Python脚本程序实现搜索文本文件内容
- spring aop实现过程之二Spring AOP中拦截器链
- 云计算机玩大型游戏,云游戏实测点评：大部分都可以顺畅玩耍
- 学习人工智能的头四个月
- 信天游机票电子行程单_4月1日起，取得火车票、飞机票等咋抵扣？权威解答来了...
- SpringMVC系列（十六）Spring MVC与Struts2的对比
- springcloud服务网关-gateway
- python后台架构Django教程——日志系统
- [转]关于SilverLight：你需要知道的十件事情
- 我精通Copula、CoVaR、GARCH、ARIMA、协整、VAR、DCC、BEKK、MES、SRISK、最优组合权重、模拟预测等模型
- access统计班级人数_使用ACCESS查询统计分数段人数
- Cinnamon 任务栏网速绘制内存和CPU使用率竖线
- 每日必读DZone news - 2022年2月十大DZone文章
- 在群晖上搭建基于 PostgreSQL 的 Joplin Server
- 小程序云开发学习笔记（二）
- “熊猫烧香”病毒简介及特征
- 移动边缘计算(MEC)促进5G发展的分析
- 神武4 电脑版天魔里职业玩法攻略（原创）