HTMIL5基本标签

已于 2022-09-19 16:11:52 修改
阅读量213 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 开发语言 html 文章标签： html 前端 开发语言
于 2022-06-27 20:51:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi341500/article/details/125478660

目录

一、html5主题分为三部分

1.子标签在父标签中需要缩进两个字符

2.先写title里的内容

3.网页内容写在body里

4.F12查看网页源代码

5.常用标签

二、超链接补充：

一、html5主题分为三部分

1.子标签在父标签中需要缩进两个字符

<html>
        <head>
        <head>
<html>

2.先写title里的内容

<title>网页头部内容<title>

3.网页内容写在body里

<body>
    <h1>一级标题</h1>
    <p>段落</p>
    <a href="">链接</a>
    <img scr="图片路径“alt=”图片替换文字"/>
</body>

4.F12查看网页源代码

火狐：选择查看器
谷歌：选择Elements

5.常用标签

标签作用写法
h1、h2、h3、h4、h5、h6标题标签<h1>标题</h1>
p段落标签<p></p>

br

换行标签<br/>
hr水平线标签<hr/>
img图像标签<img src="图片路径"alt="图片替换字">
strong字体加粗标签<strong>文本内容<strong>
em字体倾斜标签<em>文本内容</em>
a超链接标签<a href="目标地址">链接提示语</a>

备注：

标签不区分大写

<img src="图片路径"alt="图片替换文字”/>中的alt是当图片展示不出来时，以文字方式展示

转义符

&nbsp;

空格转义符
&gt;大于号 >
&lt;小于号 <
&quot;双引号   “”
&copy版权符号  @

注意：&开头，分号结尾都是转义符，因此需要注意不能漏掉开始的&和结尾的；

二、超链接补充：

页面间链接：

        <a href="目标地址"target="">链接提示语</a>

target有两个值：

        _self是默认值，表示本页面跳转

        _blank表示新建页面跳转（每点击一次都跳转到一个新页面）

锚链接：

使用锚链接需要先设置锚点，锚点设置使用id=”锚点名称“，然后链接标签中的href=”#锚点名称“

        例子：

                设置锚点：<img id="img" src="" alt="">

                设置锚点：<h1 id="title">标题</h1>

                指向锚点：<a href="#img">跳转到图片位置</>

                指向锚点：<a href="title">跳转到标题位置</>

功能性链接：

        电子邮箱、QQ、MSN等链接：<a href="mailto:ke@kgc.cn">联系我们</a>

行内元素和块元素：

        块元素： 无论内容多少，该元素独占一行（p、h1-h6）

        行内元素：内容撑开宽度，左右都是行内元素的都可以排在一行（a、strong、img、em...）

../路径

  ctrl+d删除一行

前端【1】---HTML入门学习
qq_73704268的博客
09-25 1294
HTML 是网页结构的基础，定义了内容和结构HTML 标签可以互相嵌套，形成父子关系，最大父标签为，子标签可以嵌套在
html&css的简单了解
m0_50496669的博客
09-07 1362
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
HTML常见标签用法
weixin_60778429的博客
09-07 2378
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕 着标题来展开的.target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
HTML基础1：[常见标签]
m0_51405559的博客
01-11 1437
文章目录前言一、HTML结构1.认识HTML标签2.HTML文件基本结构3.标签层次结构4.开发者工具二、使用步骤1.引入库2.读入数据总结 前言 要开发一个网站，需要学习的技术： (1)前端——网页相关的 前端三剑客： html(页面的元素，如按钮、下拉菜单等等) css(页面的样式) javascript(用户交互的动态的动作) 更形象的方式形容这三个：html是骨，css是皮，javascript是魂。 (2)后端 Java w
HTML基础
weixin_63056061的博客
10-25 1308
咬人猫兔总裁阿叶君咬人猫兔总裁阿叶君
HTML常用标签
最新发布
OUTSIDER_2023的博客
11-05 663
不想使元素生效，在href属性中写入一个#或者是javascript:;，此时的超链接没有作用，当还没有想好超链接具体跳转位置时，可以当做占位符使用
html实战-制作静态网页
热门推荐
RecordStudy
08-04 11万+
教程视频：http://edu.csdn.net/course/detail/535   从42开始 制作的网页：http://www.cnos.co/ 整体思路： 先布局再CSS控制 骨架搭好了，初始化样式， 后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及 对外部样式表的引入   1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大
JavaScript 动态网页实例 —— 广告效果
cccloveforever的博客
07-02 1453
广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用JavaScript 代码，只要很好掌握了JavaScript程序设计，剩下的就是创意和美工了。本章介绍几种广告效果，包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告，相信读者会从中受到启发。
第四章CSS样式基础
2302_82150329的博客
09-26 2088
4.1 CSS概述4.1 CSS概述。
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：父标签、子标签和后代标签
陈子的专栏
04-11 1327
（七）父标签、子标签和后代标签 HTML标签嵌套后，两个直属嵌套的标签，外层的标签称为父标签，内层的标签称为子标签；子标签的子标签则称为父标签的后代标签，子标签也属于后代标签。如： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;...
html的标签关系（父子关系和兄弟关系）以及父元素，子元素，后代元素，兄弟元素
叶鹤的博客
10-18 6020
html的标签关系（父子关系和兄弟关系）以及父元素，子元素，后代元素，兄弟元素 文章目录html的标签关系（父子关系和兄弟关系）以及父元素，子元素，后代元素，兄弟元素标签关系父元素，子元素，兄弟元素，后代元素 标签关系 双标签关系可以分成两类： 父子关系 （嵌套关系） 父子关系就是在一个双标签内嵌套其他元素，那么嵌套在其中的元素就相当于“子”，其外层元素相当于“父”。 兄弟关系 （并列关系） 兄弟关系就是在“父标签”内有多个并列的元素，这些并列的元素之间就是兄弟关系。 父元素，子元素，兄弟元素，后代元素
HTML-常用标签
p2533903941的博客
05-25 146
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片。head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.title 是 head 的子标签. head 是 title 的父标签.alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.html 标签是整个 html 文件的根标签(最顶层标签)
HTML相关概念及常用标签的用法
LCW0102的博客
05-09 792
HTML的基本结构框架，以及常用标签的列举与实例
Python 库学习笔记—— BeautifulSoup 处理子标签、后代标签、兄弟标签和父标签
U R MINE
09-07 3万+
首先，我们来看一个简单的网页https://www.pythonscraping.com/pages/page3.html，打开后： 右键“检查”（谷歌浏览器）查看元素： 用导航树的形式简单表示出来： 可知： tr 是 table的子标签 tr、th、td、img、span 标签都是 table 的后代标签   一般情况下，bbs0bj.body.h1 选择的是 body 标...
html实现子元素相对于父元素定位
gis_zhouda的博客
08-28 4569
如下图所示，要实现在地图div中放置一个select下拉选择框，select要相对于地图的div的位置，显示在左上角。 html 如下： .footer-select { POSITION: absolute; LEFT: 70px; TOP: 10px; } <div id="mapDiv" class="right-map" style="height...
兄弟html
weixin_73310187的博客
08-30 225
塌陷 父元素 overflow hidden 父子关系外间距塌陷 子元素设上外间距 此子元素与父元素不会产生上外间。solid：实 double：双实 dashed：条状线型 dotted：点状边框 none：无。单边框复合：边框高度 边框类型 .边框颜色，去掉边框：border：o/none。解决方法：1给父元素设置：overflow ：hidden。现象：元素呈并列关系，在垂直方向相领的：margin。解决：分别给这两个元素套一个父元素并为父元素。原因：并列关系的两个元素用了外间距区域。...
html选择父级标签,CSS子元素选择父元素的实现
weixin_32954161的博客
06-04 3824
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？12如果我想选择包含 a.active 的 li 该怎么实现呢？ 目前我们学到的CSS好像是没有办法的，不过今天要将的一个CSS伪类 :has() 就有这个功能，虽然还处于草案阶段，但是还是可以提前了解一下。li:has(> a.active){color:red;}除了表示包含，:has 还可以...
html实现子元素与父元素等高
zlhcsm的博客
05-22 3929
场景描述：有一个div元素，其中有两个display为inline-block的div，其中div1的height为200，问怎么能实现div2的height可以跟父元素的height相同！即div1.height = div.height。 解决方案： animation test .box-con{ width: 1200px;
我想要获取微信头像应该如何操作，在htmil页面上
09-09
要在HTML页面上获取微信用户的头像，你需要配合微信的JS-SDK（JavaScript SDK）。以下是一般的步骤： 1. **引入JS-SDK** - 首先，你需要在你的HTML文件中引入微信的JS接口文件（`wx.js`），并在`window.onload`或`document.ready`事件中初始化它： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.7.0.js"></script> <script> wx.config({ debug: false, // 是否启用调试模式，一般生产环境下设为false appId: 'your_appid', // 你的公众号AppID timestamp: '', // 这里由后端生成并传递给前端 nonceStr: '', // 同样由后端生成 signature: '', // 签名，同样由后端生成 jsApiList: ['getNetworkType'] // 需要使用的接口列表，如需获取头像则添加'showAvatar' }); </script> ``` 2. **用户授权** - 当用户同意授权后，你可以使用`wx.getNetworkType()`检查网络状态，然后调用`getUserInfo`接口获取用户信息： ```javascript wx.login({ success: function(res) { // 获取code换取access_token // ... (参照之前获取code的操作) wx.getUserInfo({ success: function(userInfo) { var avatarUrl = userInfo.avatarUrl; // 微信头像链接 // 将头像显示在HTML元素中 document.getElementById('avatar').src = avatarUrl; }, fail: function() { console.log('获取用户信息失败'); } }); } }); ``` 注意：上述代码片段中，AppID、timestamp、nonceStr和signature需要从后端获取，因为它们是基于安全考虑动态生成的。此外，为了保证用户体验，建议你在实际项目中处理好用户授权及刷新access_token的过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值