Learning html

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量158 收藏 1
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QJGZ20020910/article/details/128206256
版权

文章目录

写在卷首

本文是自己的html学习笔记，一次也记不住，所以准备作为手册之用，用到哪里回来查查。

本文大体整理自菜鸟教程html实例学习，部分内容源自其他网站，在此向原作者一并致谢。本文绝无抄袭之意，只是个人觉得既然是脚本语言，刚开始不必太过追究细节，囫囵吞枣即可：因此作为一个小白，本文仅是从其中整理记录个人认为最为常用的东西，其余细节还是在使用中学习吧！

各位同学如果觉得哪些功能很重要需要注意的，或者自己有什么看法，都可以评论区留言哦！大家共同学习，多是一件美逝了——

基本格式

例程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>学习学习再学习！</title>
    </head>
    <body>
        <h1>
            这是一个一级标题
        </h1>
        <p>
            这是一段话。
            <br>这是新的一行。
        </p>
    </body>
</html>

基本格式解释

html的基本格式为标签构成，且标签成对出现，如同成对括号。

  • 第一行<!DOCTYPE html>为文档类型声明，声明为html5文件。
  • 从<html>开始为文档内容。
  • <head>为头元素，主要为文档编码方式、文档标题等
    • <meta charset="utf-8">指定字符集编码方式为UTF-8编码。
      • 常用编码方式还有gbk、gb2312、asci等（亲测仅asci可用，其他均乱码）。
    • <title>指定文档标题，即在浏览器菜单栏显示的内容。
  • <body>为主体部分。
    • <h1>为一级标题，共有<h1>~<h6>六级标题。
    • <p>为段落划分。没有此标记即使换行再多，也显示为同一段内容。
    • 换行符为<br>，仅为换行，不换段。此标记单独出现。

文本处理

注释

<!这是一条注释，无法显示>

效果：

样式

<b>这个文本是加粗的</b><br>
<strong>这个文本是加粗的</strong><br>
<big>这个文本字体放大</big><br>
<em>这个文本是斜体的</em><br>
<i>这个文本是斜体的</i><br>
<small>这个文本是缩小的</small><br>
这个文本包含<sub>下标</sub><br>
这个文本包含<sup>上标</sup>

效果：
这个文本是加粗的

这个文本是加粗的

这个文本字体放大

这个文本是斜体的

这个文本是斜体的

这个文本是缩小的

这个文本包含下标

这个文本包含上标

字体/颜色/字号

各级标题、内容等文字均可改变字体/颜色。

<h1 style="font-family:隶书;">测试</h1>
<p style="font-family:arial;color:red;font-size:20px;">This is an easy test.</p>

效果：

测试

This is an easy test.

其中，字体大小采用px。px与其他单位换算如下：

字号ptpxem
初号42pt56px3.5em
小初36pt48px3em
34pt45px2.75em
32pt42px2.55em
30pt40px2.45em
29pt38px2.35em
28pt37px2.3em
27pt36px2.25em
一号26pt35px2.2em
25pt34px2.125em
小一24pt32px2em
二号22pt29px1.8em
20pt26px1.6em
小二18pt24px1.5em
17pt23px1.45em
三号16pt22px1.4em
小三15pt21px1.3em
14.5pt20px1.25em
四号14pt19px1.2em
13.5pt18px1.125em
13pt17px1.05em
小四12pt16px1em
11pt15px0.95em
五号10.5pt14px0.875em
10pt13px0.8em
小五9pt12px0.75em
8pt11px0.7em
六号7.5pt10px0.625em
7pt9px0.55em
小六6.5pt8px0.5em
七号5.5pt7px0.4375em
八号5pt6px0.375em

文本对齐样式

<p style="text-align:center;">居中对齐的文本</p>

效果：

居中对齐的文本

注：可以选择left/right/center三种对齐方式。

水平线

<hr>

效果：

表格

一般

<table border="1">
	<caption>这是表格标题</caption>
	
	<tr>
		<th>表头1</th>
		<th>表头2</th>
		<th>表头3</th>
	</tr>
	
	<tr>
  		<td>100</td>
  		<td>200</td>
  		<td>300</td>
	</tr>

	<tr>
  		<td>400</td>
  		<td>500</td>
  		<td>600</td>
	</tr>
</table>

效果：

这是表格标题
表头1表头2表头3
100200300
400500600

说明：

  • <tr>控制分行，<td>控制分列。
  • table的border属性设置边框宽度。
  • 各<th>单独作为一行，设置各列表头。（也可以分散写入各行，成为左侧的表头。）
  • <caption>设置表格标题。

按行/列合并单元格

话不多说，传例程觐见——

<table border="1">
    <caption>单元格跨两列:</caption>
	<tr>
  		<th>Name</th>
  		<th colspan="2">Telephone</th>
	</tr>
	<tr>
  		<td>Bill Gates</td>
  		<td>555 77 854</td>
  		<td>555 77 855</td>
	</tr>
</table>

<table border="1">
    <caption>单元格跨两行:</caption>
	<tr>
  		<th>First Name:</th>
  		<td>Bill Gates</td>
	</tr>
	<tr>
  		<th rowspan="2">Telephone:</th>
  		<td>555 77 854</td>
	</tr>
	<tr>
  		<td>555 77 855</td>
	</tr>
</table>

效果：

单元格跨两列:
NameTelephone
Bill Gates555 77 854555 77 855
单元格跨两行:
First Name:Bill Gates
Telephone:555 77 854
555 77 855

列表

无序列表

无序列表采用标签<ul>(unsigned list)，内部各项采用标签<li>(list)。例程如下：

<ul>
	<li>Coffee</li>
	<ul>
		<li>Tea</li>
		<li>Milk</li>
    </ul>
    <li>Book</li>
    <ul>
		<li>What?</li>
		<li>Fuck!</li>
    </ul>
</ul>

效果：

  • Coffee
    • Tea
    • Milk
  • Book
    • What?
    • Fuck!

我们应当注意到内心：看不出来的同学，我看卷太久了还是，建议吃点喝点再来看，列表是可以嵌套的。

有序列表

有序列表就是把无序列表的标签<ul>改成<ol>(ordered list)。

例程就不写了，自己实操一遍才是最好的例程。（其实就是懒）

自定义列表

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
	<dd>- fuck</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

效果：

Coffee
- black hot drink
- fuck
Milk
- white cold drink

链接

超链接

超链接使用以下格式：

<a href="https://www.runoob.com">这是一个链接</a>

效果：这是一个链接

  • <a>后所跟文字即显示的文字内容。
  • 属性href指定超链接地址，用单引或双引均可，但当内容本身就有双引时必须采用单引。

内部链接

此处尚未弄明白。

没有下划线的链接

<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>

效果：访问 runoob.com!

图片插入

<img src="https://i-blog.csdnimg.cn/blog_migrate/634e90da656cbb4f57b58f2edfc26d64.png" border="10" alt="菜鸟教程" width="258" height="39">

效果：

注：

  • src属性指明图片地址，可以为网址或本地地址（相对地址/绝对地址）。
  • border属性设置边框宽度。
  • alt属性指明文字，在图像无法显示时显示该文字内容。
  • width与height分别指明图片宽高。用引号括起来。

上下浮动

使用align属性。

属性说明
bottom**(默认)**图片底部与文字底部对齐
top图片与文字上端对齐
mid图片与文字中央对齐
<p>默认对齐的图像 (align="bottom") <img src="https://i-blog.csdnimg.cn/blog_migrate/d68aef8a25db71aaf50cf4f5cbf69fbe.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<p>图片使用 align="middle":<img src="https://i-blog.csdnimg.cn/blog_migrate/d68aef8a25db71aaf50cf4f5cbf69fbe.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<p>图片使用 align="top": <img src="https://i-blog.csdnimg.cn/blog_migrate/d68aef8a25db71aaf50cf4f5cbf69fbe.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

效果如下：（markdown无法完全显示，请看html）

默认对齐的图像 (align="bottom") Smiley face 这是一些文本。

图片使用 align="middle":Smiley face这是一些文本。

图片使用 align="top": Smiley face这是一些文本。

左右浮动

<p>
<img src="https://i-blog.csdnimg.cn/blog_migrate/d68aef8a25db71aaf50cf4f5cbf69fbe.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="https://i-blog.csdnimg.cn/blog_migrate/d68aef8a25db71aaf50cf4f5cbf69fbe.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

效果：

Smiley face 一个带图片的段落，图片浮动在这个文本的左边。

Smiley face 一个带图片的段落，图片浮动在这个文本的右边。

创建图像映射

<p>点击太阳或其他行星，注意变化：</p>

<img src="https://i-blog.csdnimg.cn/blog_migrate/ba58700cf1b529ceebaa5b5cac62f4a3.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://www.runoob.com/images/sun.gif">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="https://www.runoob.com/try/demo_source/merglobe.gif">
  <area shape="circle" coords="124,58,8" alt="Venus" href="https://www.runoob.com/images/venglobe.gif">
</map>

效果：

点击太阳或其他行星，注意变化：

Planets Sun Mercury Venus

说明：

  • 原图像使用属性usemap并注明使用的map名称，前加#号。
  • 使用标签<map>，属性name写明本map名称。
  • 内部各成员使用<area>，分别指定形状、参数、替代文字、图片链接等。
shape属性形状对应参数（coords属性）说明
rect矩形 x 1 , y 1 , x 2 , y 2 x_1,y_1,x_2,y_2 x1​,y1​,x2​,y2​左上和右下顶点坐标
circle圆形 x , y , r x,y,r x,y,r圆心、半径
poly多边形 x 1 , y 1 , ⋯   , x n , y n x_1,y_1,\cdots,x_n,y_n x1​,y1​,⋯,xn​,yn​n个顶点坐标

其中，坐标值x左侧为0，y上侧为0。

  • 原图像使用属性usemap并注明使用的map名称，前加#号。
  • 使用标签<map>，属性name写明本map名称。
  • 内部各成员使用<area>，分别指定形状、参数、替代文字、图片链接等。
shape属性形状对应参数（coords属性）说明
rect矩形 x 1 , y 1 , x 2 , y 2 x_1,y_1,x_2,y_2 x1​,y1​,x2​,y2​左上和右下顶点坐标
circle圆形 x , y , r x,y,r x,y,r圆心、半径
poly多边形 x 1 , y 1 , ⋯   , x n , y n x_1,y_1,\cdots,x_n,y_n x1​,y1​,⋯,xn​,yn​n个顶点坐标

其中，亲测坐标值x左侧为0，y上侧为0。

摸鱼的兔崽子
关注
Q-learning
兔美酱
04-19 4308
原文：http://blog.sina.com.cn/s/blog_9409e4a3010137gm.html 环境建模 假设在一个建筑里有5个房间通过门连通如下图所示，我们给5个房间依次命名为A~E。现在考虑我们站在外面的一个大房间F，且房间F覆盖了建筑其余所有空间。也就是从F可以进入B或E房间。 我们可以将每个房间表示为一个节点，每扇门作为一条边。 我们想要到达一个目标
主动学习(Active Learning)
热门推荐
猪逻辑公园
12-26 6万+
1. 写在前面 　　在机器学习(Machine learning)领域，监督学习(Supervised learning)、非监督学习(Unsupervised learning)以及半监督学习(Semi-supervised learning)是三类研究比较多，应用比较广的学习技术，wiki上对这三种学习的简单描述如下： 监督学习：通过已有的一部分输入数据与输出数据之间的对应关系，生成一个函...
【Meta Learning学习笔记】Meta Learning详解
a312863063的博客
06-07 3万+
完整笔记：www.gwylab.com/note-meta_learning.html —————————————————————————————————— 前言 · 为何要研究Meta Learning？ 尽管我是研究生成模型的，但是最近对于meta learning产生了强烈的兴趣。理由在于，GANs本身是一个特别吃数据集的模型，从某种意义上来说，数据集的好坏对最后生成效果的影响，不...
度量学习Metric Learning
邦戈邦戈栗子的博客
01-14 3146
度量学习 (Metric Learning) == 距离度量学习 (Distance Metric Learning，DML) == 相似度学习  度量学习 是指 距离度量学习，Distance Metric Learning，简称为 DML，是人脸识别中常用传统机器学习方法，由Eric Xing在NIPS 2002提出。 度量学习（Metric Learning）也就是常说的相似度学习。如果...
aid learning安装应用_aid learning更换源
weixin_42506884的博客
12-24 2259
aid learning更换源是移动端可视化AI编程平台。aid learning更换源提供可视化的AI编程IDE，用户通过aid learning更换源可以在像pc一样编写和运行AI程序！软件介绍aid learning更换源 App在Android手机上构建了一个带图形界面的Linux系统并内置了目前排名top7的AI深度学习框架，通过内置的AiCode可视化编程器和大量的AI实例，并提供在移...
Lifelong Learning
Forlogenの解忧杂货铺
05-26 5232
Lifelong Learning https://www.forbes.com/sites/kpmg/2018/04/23/the-changing-nature-of-work-why-lifelong-learning-matters-more-than-ever/#4e04e90e1e95 终身学习（Lifelong Learning或Continuous Learning、 Nev...
whats deep learning
Bourne_Wang的博客
03-02 1496
For deep versus shallow learning in educational psychology, seeStudent approaches to learning. For more information, seeArtificial neural network. Machine learninganddata mining Problems[...
AidLearning上手使用经验谈
dnmike的专栏
12-03 2万+
AidLearning上手使用经验谈 cemike@126.com AidLearning上手使用经验谈涉及新手入门常遇到的几个问题：云桌面、虚拟键盘、手机/平板和电脑文件互传、Java开发等，帮助你快速上手。 一、介绍 AidLearning是一款相当不错的在Android平台模拟Linux系统环境的应用。比起以前需要root的busybox，不需要root，而且类似苹果电脑桌面的界面，更像是有了一个较完整的系统。如果用它的XFCE全屏模式的话，你会真的以为自己是在用Linux操...
DeepLearning Overview
u010555688的专栏
09-05 1181
四、DeepLearning Overview •Train networks with many layers (vs. shallow nets with just a couple of layers) •Multiplelayers work to build an improved feature space –First layer learns 1st order featur
Machine Learning 资料推荐
kayzhao的专栏
08-01 1291
如今机器学习的学习资源越来越多，对于入行的朋友们来说，他们只需要关注自己从事的具体研究方向最新的国际会议、杂志上的paper就差不多了，而对于那些想要入行的朋友们，选择经典的教程入手可能会事半功倍。以下这些教程，是机器学习比较经典的，也欢迎朋友们补充。 一、公开课 Andrew Ng教授的机器学习课程。多啰嗦几句Andrew Ng，他虽然没出过啥书，但是他对这两年接触机器学习的人应该帮
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 mobi
05-23
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 and CSS3 英文mobi 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
Learning HTML5 Game Programming 无水印原版pdf
01-17
Learning HTML5 Game Programming 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细...
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 azw3
05-23
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 and CSS3 英文azw3 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 epub
05-23
HTML & CSS for Complete Beginners A Step by Step Guide to Learning HTML5 and CSS3 英文epub 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
HTML Learning_html_
10-03
"HTML Learning_html_"这个标题暗示了这是一个关于学习HTML的资源，可能是教程或者指南，而"hyper text html Programming."进一步确认了主题，意味着我们将探讨超文本和HTML编程的相关知识。 在HTML中，超文本指的...
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 830
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1114
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 278
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 718
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
HTML5游戏编程实战指南
"Addison.Wesley.Learning.HTML5.Game.Programming.2012 - 一本由James L. Williams编写的书籍，属于Addison-Wesley Learning Series，旨在通过实践指导帮助读者快速学习HTML5游戏编程，涵盖Canvas、SVG和WebGL技术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值