关于『HTML』:第二弹

最新推荐文章于 2024-09-04 11:56:14 发布
最新推荐文章于 2024-09-04 11:56:14 发布
阅读量179 收藏
点赞数
分类专栏： HTML 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/infor_kylin/article/details/119786353
版权

 

关于『HTML』:第二弹

 

建议缩放90%食用

 

第二弹! 它来了! 它来了!

我竟然没有拖更,对了,你们昨天用草稿纸了么

 

 

开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这个↓↓↓

求大家答疑解惑啊,拜托了 感觉自己看不懂人话了

废话少说,开始正文

 

  又要为大家带来(过时的)HTML了呢~  

 

  正文开始  

如果第一次看建议搭配"关于『HTML』:第一弹"一起食用

 

 

一. HTML 链接

  (干货开始了)  

  • HTML 链接是通过标签 <a> 来定义的

代码:

<a href="http://www.staggeringbeauty.com/">这是一个链接(点我)</a>

效果:


这是一个链接(点我)



  (这个网站可好玩了对吧)  


彩蛋:

在网上冲浪的时候,我发现好多大佬的超链接都在同一页打开


这让摸鱼的我感到十分为难,  八中OJ的编辑帖子没有自动保存!!嘤嘤嘤,我写了好久的稿  



so


如何新建一个页面打开网站:

提前剧透

  • HTML 链接 - target 属性
  • 使用 target 属性，你可以定义被链接的文档在何处显示

下面的这行会在新窗口打开文档：


代码:

<a href="https://cybermap.kaspersky.com/cn" target="_blank" rel="noopener noreferrer">卡巴斯基网络威胁实时地图</a>

效果:


卡巴斯基网络威胁实时地图



  (这个网站看得我要瞎了)  




二. HTML 图像

  (你有CSDN账号吗)  

  • 在 HTML 中，图像由 标签定义
  • img 是空标签，意思是说，它只包含属性，并且没有闭合标签

(一). HTML 图像- 图像标签（ img）和源属性src

  • 要在页面上显示图像，你需要使用源属性（src）
  • src 指 “source”。源属性的值是图像的 URL 地址 (就是图片地址啦,对图片单击右键就有选项,本地文件除外) 

代码:

<img src="https://i-blog.csdnimg.cn/blog_migrate/910d4fb3583f075b8f143aa677ad1795.png">

效果:


  张起灵耶(又夹带私货)  



(二). HTML 图像- Alt属性

  • alt 属性用来为图像定义一串预备的可替换的文本
  • 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
  • 此时，浏览器将显示这个替代性的文本而不是图像,为页面上的图像都加上替换文本属性是个好习惯(可惜我还没有)
  • 这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常友好哒~

代码:

<img src="https://i-blog.csdnimg.cn/blog_migrate/5c5577f6ba032ae17f9bf9b971d14b2e.jpeg" alt="817稻米节官宣海报">

效果:
817稻米节官宣海报

  今年稻米节直播你看吗(夹带私货上瘾)  



(三). HTML 图像- 设置图像的高度与宽度

代码:

<img src="https://i-blog.csdnimg.cn/blog_migrate/5c5577f6ba032ae17f9bf9b971d14b2e.jpeg" alt="817稻米节官宣海报" width="304" height="228">

效果:


817稻米节官宣海报

注:

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我的建议是：慎用图片。 注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。


就像酱紫↓↓↓

817稻米节官宣海报


三. HTML 元素语法

  (嘤嘤嘤,字好多)  

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • HTML 元素的内容是开始标签与结束标签之间的内容
  • HTML 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

 注: 您将在未来的某一章中学习更多有关属性的内容呢。


真 • 注:

  • 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
  • 标签写法要用主要是为了简单, 看我多为你们着想~（有些版本对大小写可认为相同，而xhtml中强制使用小写）



四. HTML中如何使用CSS

  (你们期待的CSS终于来了呢)  

  • CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
  • CSS 可以通过以下方式添加到HTML中:

    1. 内联样式- 在HTML元素中使用"style" 属性

    2. 内部样式表 -在HTML文档头部 区域使用

在这一弹的HTML教程中使用的是内联 CSS 样式来介绍实例


主要是为了简单, 看我多为你们着想


注:你也许可以通过以后某天生产的某弹 CSS 教程 学习更多的 CSS 知识。

(一). 内联样式

代码:

<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一个段落。</p>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>

效果:

这是一个标题

这是一个段落。

这是另一个标题

这是另一个段落。




五. HTML 表格

(一). 表格的定义

  • <table> 标签定义 HTML 表格
  • 简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构
  • 其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元


(二). 表格的标签

  • 在HTML定义表格的时候，有以下标签供我们使用
0表格标签用处
1<table>定义表格，生成的表格在一对 <table></table>中
2<caption>定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
3<thead>定义表格的页眉
4<tbody>定义表格的主体
5<tfoot>定义表格的页脚
6<th>定义表格的表头，一般是表头中的内容会被加黑
7<tr>定义表格的行
8<td>定义表格单元格
9<col>定义用于表格列的属性
10<colgroup>定义表格列的组


(三). 单元格边框(border)

  • 表格边框：在使用<table border=“1”></table> 的方式来定义
  • 其中：数字表示边框的宽度，单位为像素

以下举三个边框的例子:


代码:

//无边框
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>考拉</td>
        <td>不详</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cortana/td>
        <td>女</td>
    </tr>

</table>


//边框宽度为2
<table border="2">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>考拉</td>
        <td>不详</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cortana</td>
        <td>女</td>
    </tr>

</table>


//边框宽度为10
<table border="10">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>考拉</td>
        <td>不详</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cortana</td>
        <td>女</td>
    </tr>

</table>

效果:


编号姓名性别
1考拉不详
2Cortana女

编号 姓名性别
1考拉不详
2Cortana女

编号 姓名性别
1考拉不详
2Cortana女


  第二弹到也结束了呢亲亲~  

第二弹完结啦~ []~(￣▽￣)~*

第三弹还会远吗? (我真的还想再活五百年)

注: 这是HTML5以前的标准, 在前一篇文章就有说明哦  实在要杠眼科出门左转  

关于『HTML』:第二弹 就酱紫结束啦~ 叭叭~(´▽`ʃ♡ƪ)

明天七夕,组团偷织女吗

上一篇: "关于『HTML』:第一弹" || 下一篇: "关于『HTML』:第三弹 (完结篇)"

北柒kylin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PopUpInicio.html:从HTML主页弹出
05-06
第二个参数是窗口名称，用于区分不同的窗口实例。第三个参数是窗口属性，如宽度和高度。 `if (popupWindow.focus) { popupWindow.focus(); }` 这段代码确保了新打开的窗口获取焦点，这样用户就可以立即看到它。 ...
goit-markup-hw-02:第二本作业htmlcss
04-04
【标题】"goit-markup-hw-02:第二本作业htmlcss"指的是一个关于HTML和CSS的编程作业，可能是在GoIT课程中的第二个HTML/CSS相关的实践项目。这个项目可能涵盖了创建网页的基本结构、样式化内容以及实现网页交互等核心...
Head First Html CSS 第二版
01-17
《Head First HTML与CSS 第2版》是一本针对初学者设计的HTML5和CSS3入门教程，旨在通过直观且生动的方式帮助读者理解这两个核心技术。HTML（超文本标记语言）是构建网页的基础，而CSS（层叠样式表）则用于美化网页的...
HTML 总结
2301_77527830的博客
08-29 888
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签。网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。为了可以使用这些预留字符，我们必须在html中使用字符转义。
前端知识HTML&CSS
w13114的博客
08-31 1243
前端知识
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 958
捕捉一只耿鬼
前端篇-html
qq_60203955的博客
08-30 353
前端学习
Vue(三)内置指令v-text、html、cloak、once、pre；自定义指令的三种方式、Vue生命周期
qq_44285582的博客
08-29 998
Vue内置之类v-text、v-html、v-cloak、v-once、v-pre；自定义指令directives配置项；函数式、对象式自定义指令；生命周期函数--挂载、更新、销毁
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 518
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1390
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 502
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 3950
深入理解JavaScript闭包：避免常见的内存泄漏问题
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1448
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
xuehai996的博客
08-29 2430
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
web开发
最新发布
2301_76876837的博客
09-04 276
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 501
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
Nginx部署前端Vue项目
不会代码的小林
09-03 803
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 989
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
HTML5响应式布局实践：实现跨设备优化
"探索HTML5第二弹（下）主要关注了响应式布局这一主题，它并非全新的设计概念，而是利用现有的技术资源进行创新以适应不同设备和尺寸的展示需求。响应式布局的核心理念是确保在各种屏幕尺寸上，网站内容都能以直观且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值