关于『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』:第二弹的更多相关文章

  1. 『PyTorch』第二弹重置_Tensor对象

    『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...

  2. 关于『HTML5』:第二弹

    关于『HTML5』:第二弹 建议缩放90%食用 咕咕咕咕咕咕咕!!1 (蒟蒻大鸽子终于更新啦) 自开学以来,经过了「一脸蒙圈的 半期考试」.「二脸蒙圈的 体测」的双重洗礼,我终于有空肝 HTML5 辣 ...

  3. 关于『Markdown』:第二弹

    关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...

  4. 『TensorFlow』第二弹_线性拟合&神经网络拟合_恰是故人归

    Step1: 目标: 使用线性模拟器模拟指定的直线:y = 0.1*x + 0.3 代码: import tensorflow as tf import numpy as np import matp ...

  5. 『MXNet』第二弹_Gluon构建模型

    上节用了Sequential类来构造模型.这里我们另外一种基于Block类的模型构造方法,它让构造模型更加灵活,也将让你能更好的理解Sequential的运行机制. 回顾: 序列模型生成 层填充 初始 ...

  6. 『PyTorch』第二弹_张量

    参考:http://www.jianshu.com/p/5ae644748f21# 几个数学概念: 标量(Scalar)是只有大小,没有方向的量,如1,2,3等 向量(Vector)是有大小和方向的量 ...

  7. 关于『Markdown』:第一弹

    关于『Markdown』:第一弹 建议缩放90%食用 声明: 在我之前已有数位大佬发布 "Markdown" 的语法知识点, 在此, 仅整理归类以及补缺, 方便阅读. 感谢 C20 ...

  8. 关于『HTML』:第一弹

    关于『HTML』:第一弹 建议缩放90%食用 根据C2024XSC212童鞋的提问, 我准备写一稿关于『HTML』基础的帖 But! 当我看到了C2024XSC130的 "关于『HTML5』 ...

  9. 关于『进击的Markdown』:第二弹

    关于『进击的Markdown』:第二弹 建议缩放90%食用 众里寻他千百度,蓦然回首,Markdown却在灯火灿烂处 MarkdownYYDS! 各位早上好!  我果然鸽稿了  Markdown 语法 ...

随机推荐

  1. es6零碎记忆

    1:substring 和 substr var str = '0123456789' console.log(str.substring(1)); //123456789 console.log(s ...

  2. idea 启动微服务 设置 run dashboard

    微服务如果很多,启动时如果在run窗口,会不是很方便,所以idea中配置了rundashboard,有时不自动出现时,需要进行配置: 配置操作如下: 我的idea版本2020.2 1.在父工程的.id ...

  3. 【Android开发】分割字符串工具类

    public class TextUtils { public static String[] results; /** * 分隔符:"." * * @param resource ...

  4. ES7中前端异步特性：async、await。

    在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...

  5. caioj 1001: [视频]实数运算1[水题]

    题意:输入两个实数a和b,输出它们的和 题解:简单题不写题解了-- 代码: #include <cstdio> double a, b; int main() { while (~scan ...

  6. maven导入依赖了提示can't resolved

    maven导入依赖显红报错 网上有很多解决方案,我试过几个但是都不是很好用,推荐一个我自己一直在用的解决方案 在终端执行命令 mvn idea:idea 无法解析的原因基本上是因为包没下载完整,执行这 ...

  7. pycharm——import已存在的库居然失败！

    问题 明明在cmd中可以import的库,放到pycharm中却找不到. 问题根源 找了一圈,最后得到这个结论. 因为pycharm默认就是这样的... 解决 打开设置,找到解释器 点击右边齿轮图标, ...

  8. float，short类型赋值运算问题

    float f = 3.4; 有错吗? 有错,因为浮点类型默认是double类型,double类型赋值给float类型是大类型赋值给小类型需要进行强转,可在3.4前加(float)进行强转,或者在声明 ...

  9. Fastjson JdbcRowSetImpl利用链学习

    JdbcRowSetImpl 接着继续学习fastjson的第二条链JdbcRowSetImpl,主要是利用jndi注入达到的攻击,而且没有什么利用限制,而且其原理就是setter的自动调用,具体se ...

  10. Rancher部署PostgreSQL容器

    1.打开工作负载,选择部署服务 2.选择合适的PostgreSQL镜像 镜像地址https://registry.hub.docker.com/_/postgres,也可使用公司内部镜像库 网络模式选 ...