前端学习——HTML的各种标签（以及代码样例）

html标题head标签：快捷键h+8（快捷键中的数字键是大键盘上的数字键，不是小键盘的）

1：打开网页出现乱码时，在head标签中加<meta charset="utf-8" /> 快捷键m+6

htnl的body标签

1：h1到h6，会将其中的数据加粗加黑显示，并且显示以此减弱，标题标签自带换行功能

2：标签居中 <h1 align="center"> 今天天气真好，适合打王者荣耀 </h1>

3：水平线标签会在页面中显示一条水平线 <hr />默认居中

设置水平线的宽度 <hr width="600px"/> 或者<hr width="40%"/> 像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小

size="高度"

color=“颜色

<hr width="600px" size="20px" color="red" align="left"/>”水平线居左

4：段落标签

<p> </p> 会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便，段落与段落之间会自动换行

5：换行符 <br />

6:空格符  

7:权重标签： <b> </b> 会将内容加黑显示

<i> </i> 会将内容斜体显示

<u> </u> 会将内容增加下划线

<del> </del>会将内容增加中划线、

以上权重标签可以嵌套使用，并且不会自动换行。

以上7个标签用途举例

8:列表标签

（1）无序列表 <ul> <ul/>

<li> <li/>该标签中书写列表内容，一个li标签代表列表中的一行数据

特点：默认数据前有一个黑圆圈符号

（2）有序列表 <ol> <ol/>

<li> <li/> :该标签中书写列表内容，一个li标签中的一行数据

特点：会自动地给列表进行顺序编码，格式将从小到大并且是连续的

属性： type：可以改变顺序编码的值，可以是1 a A I，默认使用阿拉伯数字编号

（3）自定义列表

<dl> <dl/>

<dt> <dt/>:数据的标题

<dd> <dd/>:数据的具体的内容，一个dd表示一条数据

9：图片标签

img

src:图片路径

本地资源路径：一般本地图片资源使用相对路径即可

路径：

相对路径：从当前文件出发查找另一个文件所经过的路径

绝对路径：从根盘符出发所查找文件的路径

具体就是将图片放进此目录的文件夹下，让其在这上面出现

可以在父文件夹下新建一个目录将图片放入进去但是其路径改变了，加上图片存入的文件夹名字，img/

如何设置图片的大小呢：<img src="img/1.jpg.jpg" height="200px"/ >

width:设置图片的宽度，如果是单独设置，则在图片保证不失真的情况下自动缩小或放大

单位可以是px也可以是百分比

height：设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或放大

单位可以是px也可以是百分比

（图片不会自动换行的）

使用网络资源：

直接复制图片资源的url地址

属性：title:图片标题，鼠标放在图片上的时候会显示

alt：图片加载失败后的提示语

10:超链接标签

href:要跳转的网络资源路径

本地资源：相对路径

注意：超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片

如：文字访问方式代码以及结果如图：

图片访问方式如图：

网络资源：网络资源（网页）的url

属性：target：制定要跳转的网页西元的显示位置

锚点学习：

作用：在一张网页中进行资源跳转

使用：先使用超链接标签在指定的网页位置增加锚点，格式为：

使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的，格式：<a href="锚点名">访问方式</a>

<a href="#">回到顶部</a> 刷新网页回到顶部。

代码以及展示效果

<html><head><title>锚点学习</title><meta charset="UTF-8"/></head><body><h3>锚点学习</h3><hr /><h4>目录</h4><a href="#first">第一章</a><br /><a href="#second">第二章</a><br /><a href="#third">第三章</a><br /><a name="first"></a><p>第一章</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><p>今天一大早起床打王者荣耀，五连胜，很开心，所以下午我决定好好学习</p><a name="second"></a><p>第二章：</p><p>昨天一大早起床打王者荣耀，一直输，很难过，所以直到晚上我才开始学习</p><p>作题昨天一大早起床打王者荣耀，一直输，很难过，所以直到晚上我才开始学习</p><p>昨天一大早起床打王者荣耀，一直输，很难过，所以直到晚上我才开始学习</p><p>昨天一大早起床打王者荣耀，一直输，很难过，所以直到晚上我才开始学习</p><p>昨天一大早起床打王者荣耀，一直输，很难过，所以直到晚上我才开始学习</p><a name="third"></a><p>第三章</p><p>明天不能打王者了，我要开学了。</p><p>明天不能打王者了，我要开学了。</p><p>明天不能打王者了，我要开学了。</p><p>明天不能打王者了，我要开学了。</p><a href="#">回到顶部</a></body>
</html>

11：form标签学习

<html><head><title>form标签</title><meta charset="UTF-8"/></head><body><h3>form标签</h3><hr /><form action="#"  method="get">用户名：<input type="text" name="uname" /><br />密码：<input type="password" name="upwd" /><br />性别:男:<input type="radio" name="sex" value="1" checked="checked"/> 女:<input type="radio" name="sex" value="0"/><br /><!--name:name属性值相同的单选框只能选择一项数据-->爱好：<br />吃饭：<input type="checkbox" name="fav" value="1" checked="checked" /> <br />睡觉<input type="checkbox" name="fav" value="2"  /><br />打王者 <input type="checkbox" name="fav" value="3" /><br /><br />籍贯：<br /><select name="adress"><option value="">--请选择--</option><option value="1">湖南</option><option value="2">上海</option><option value="3" selected="selected">深圳</option></select><br /><textarea name="in" cols="10" rows="10"></textarea><input type="submit" value="登录" /></form></body>
</html>

12：模拟百度

<html><head><title>模拟百度</title><meta charset="UTF-8"/></head><body><h3>模拟百度</h3><hr /><form action="https://www.baidu.com/s" method="get"><input  type="text" name="wd" id="" value=""/><input type="submit" value="百度一下" /></form></body>
</html>

前端学习——HTML的各种标签（以及代码样例）相关推荐

idea内存溢出解决_各种OOM代码样例及解决方法
针对目前大家对OOM的类型不太熟悉,那么来总结一下各种OOM出现的情况以及解决方法.把各种OOM的情况列出来,然后逐一进行代码编写复现和提供解决方法. 1. 堆溢出-java.lang.OutOfMe ...
各种OOM代码样例及解决方法
点击上方「蓝字」关注我们针对目前大家对OOM的类型不太熟悉,那么来总结一下各种OOM出现的情况以及解决方法.把各种OOM的情况列出来,然后逐一进行代码编写复现和提供解决方法. 1. 堆溢出-java ...
java二重循环计数_java的二重循环代码样例
1.计算三个班的平均分 import java.util.Scanner; public class AvgScore{ public static void main (Sting[] args){ ...
Android拍照上传代码样例
2019独角兽企业重金招聘Python工程师标准>>> Android拍照上传代码样例 1.LoginWindow.java --登录窗口 package com.hemi.rhet ...
python开发接口故障码_Python代码样例
Python代码样例链接复制成功! 分享微博分享文档到微博微信扫码分享文档复制链接复制链接到剪贴板更新时间:2020/10/27 GMT+08:00 Python代码样例如下所示: & ...
pytorch geometric GraphSAGE代码样例reddit和ogbn_products_sage，为何subgraph_loader将sizes设成[-1]
pytorch geometric GraphSAGE代码样例reddit和ogbn_products_sage,为何subgraph_loader将sizes设成[-1] loader infere ...
html前端学习基础入门教程之HTML代码的优化关键词密度
与Google和MSN相比,Yahoo!对HTML代码的关注程度更高.很多测试表明,HTML文件中的错误,可能在Google或MSN中影响很小甚至几乎没有,不妨碍该页面出现在SERP的前端;但在Yah ...
前端学习之HTML基本标签介绍
计算与语言与学习外语相同,都要首先掌握它的基本语法和规则.HTML作为入门互联网最基本的开发语言之一,是每一位互联网技术人员都需要掌握的技术,尤其是前端开发工程师.对于初学者而言,HTML都有哪些基本 ...
前端学习笔记day01 html 标签之音频 embed+audio+video
1. embed标签有时候视频很大,我们不直接从本地导入到html中,而是从优酷上直接复制html代码即可: 2. 如果是一些小的视频文件可以借助video标签 2.1 <video sr ...

前端学习——HTML的各种标签（以及代码样例）

前端学习——HTML的各种标签（以及代码样例）相关推荐

最新文章

热门文章