关于『HTML』:第二弹
关于『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://img1.baidu.com/it/u=228261774,2085007108&fm=26&fmt=auto&gp=0.jpg">
效果:
张起灵耶(又夹带私货)
(二). HTML 图像- Alt属性
- alt 属性用来为图像定义一串预备的可替换的文本
- 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息
- 此时,浏览器将显示这个替代性的文本而不是图像,为页面上的图像都加上替换文本属性是个好习惯(可惜我还没有)
- 这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常友好哒~
代码:
<img src="https://img-blog.csdnimg.cn/20210813102611553.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2luZm9yX2t5bGlu,size_16,color_FFFFFF,t_70" alt="817稻米节官宣海报">
效果:
今年稻米节直播你看吗(夹带私货上瘾)
(三). HTML 图像- 设置图像的高度与宽度
代码:
<img src="https://img-blog.csdnimg.cn/20210813102611553.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2luZm9yX2t5bGlu,size_16,color_FFFFFF,t_70" alt="817稻米节官宣海报" width="304" height="228">
效果:
注:
假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我的建议是:慎用图片。 注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
就像酱紫↓↓↓
三. 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 | 考拉 | 不详 |
2 | Cortana | 女 |
编号 | 姓名 | 性别 |
---|---|---|
1 | 考拉 | 不详 |
2 | Cortana | 女 |
编号 | 姓名 | 性别 |
---|---|---|
1 | 考拉 | 不详 |
2 | Cortana | 女 |
第二弹到也结束了呢亲亲~
第二弹完结啦~ []~( ̄▽ ̄)~*
第三弹还会远吗? (我真的还想再活五百年)
注: 这是HTML5以前的标准, 在前一篇文章就有说明哦 实在要杠眼科出门左转
关于『HTML』:第二弹 就酱紫结束啦~ 叭叭~(´▽`ʃ♡ƪ)
明天七夕,组团偷织女吗
上一篇: "关于『HTML』:第一弹" || 下一篇: "关于『HTML』:第三弹 (完结篇)"
关于『HTML』:第二弹的更多相关文章
- 『PyTorch』第二弹重置_Tensor对象
『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...
- 关于『HTML5』:第二弹
关于『HTML5』:第二弹 建议缩放90%食用 咕咕咕咕咕咕咕!!1 (蒟蒻大鸽子终于更新啦) 自开学以来,经过了「一脸蒙圈的 半期考试」.「二脸蒙圈的 体测」的双重洗礼,我终于有空肝 HTML5 辣 ...
- 关于『Markdown』:第二弹
关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...
- 『TensorFlow』第二弹_线性拟合&神经网络拟合_恰是故人归
Step1: 目标: 使用线性模拟器模拟指定的直线:y = 0.1*x + 0.3 代码: import tensorflow as tf import numpy as np import matp ...
- 『MXNet』第二弹_Gluon构建模型
上节用了Sequential类来构造模型.这里我们另外一种基于Block类的模型构造方法,它让构造模型更加灵活,也将让你能更好的理解Sequential的运行机制. 回顾: 序列模型生成 层填充 初始 ...
- 『PyTorch』第二弹_张量
参考:http://www.jianshu.com/p/5ae644748f21# 几个数学概念: 标量(Scalar)是只有大小,没有方向的量,如1,2,3等 向量(Vector)是有大小和方向的量 ...
- 关于『Markdown』:第一弹
关于『Markdown』:第一弹 建议缩放90%食用 声明: 在我之前已有数位大佬发布 "Markdown" 的语法知识点, 在此, 仅整理归类以及补缺, 方便阅读. 感谢 C20 ...
- 关于『HTML』:第一弹
关于『HTML』:第一弹 建议缩放90%食用 根据C2024XSC212童鞋的提问, 我准备写一稿关于『HTML』基础的帖 But! 当我看到了C2024XSC130的 "关于『HTML5』 ...
- 关于『进击的Markdown』:第二弹
关于『进击的Markdown』:第二弹 建议缩放90%食用 众里寻他千百度,蓦然回首,Markdown却在灯火灿烂处 MarkdownYYDS! 各位早上好! 我果然鸽稿了 Markdown 语法 ...
随机推荐
- DRF 视图组件
目录 DRF 视图组件 视图组件大纲 两个视图基本类 五个扩展类 九个子类视图 视图集 常用视图集父类 魔法类 一览表 DRF中视图的"七十二变" 第一层:基于APIview的五个 ...
- Cannot get a STRING value from a NUMERIC cell poi异常解决
ref:http://www.tpyyes.com/a/kuozhan/2017/0902/199.html poi导入excel表格数据时报java.lang.IllegalStateExcepti ...
- js,nodejs如何判断文件是什么编码格式
nodejs编码只支持utf8的编码方式,无论是打开某个文件或者写.js脚本都得以utf8的编码方式保存,不然程序无法运行,读出来的文件是乱码. 如果是在前台,读取文件是通过FileReader或者F ...
- HTML5 meta标签的用法
声明文档使用的字符编码:<meta charset="utf-8" />声明文档的兼容模式:<meta http-equiv="X-UA-Compati ...
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- JavaScript 数组(Array)对象的方法
JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...
- docker中mysql导入sql文件
1.先将文件导入到容器 docker cp **.sql [容器名]:/root/ 2.进入容器 docker exec -ti [容器名/ID]/bin/bash 3.将文件导入数据库 mysql ...
- Java学习day8
今天学习了package,import,final,static和多态 package可以理解为文件夹,因为有些类可能重名,如果在同一个目录下就无法正常实现,所有需要有不同的包来装对应的类 Java出 ...
- 新手小白入门C语言第四章:变量与常量
C 变量 变量其实只不过是程序可操作的存储区的名称. C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上. 变量的名称可以由字母.数字和 ...
- window 的简单使用
window 的延迟加载 js代码 window的原始用法 (缺点 : 只能使用一次) window.onload = function() { var btn = document.querySel ...