当前位置: 首页 > 编程日记 > 正文

适用于0基础小伙伴的HTML知识点总结 先到先得哟

HTML基础知识点分享

前段时间一直忙于私下学习消化一些PHP中的知识体系,导致博客开通至今一直没发表相关技能贴。最近呢~博主夏天我正在进行前半段知识体系和框架的总结阶段。借此,抽空给大家分享一下私下自己学习时的一些心得体会以及知识体系,希望博主我在自我总结的同时也能帮助到其他人,或者是陪伴正在学习这方面的人一起加油努力,互相分享!

首先因为博主我先前并不是计算机专业的,所以完全可以说是一只“电脑小白”,但是本小白还是会电脑开关机的哈~于是,我请教和咨询了一下做这块的朋友以及本公司的同事,早些年的时候他们建议我学习HTMLCSSJAVAScript等进行一个基础逻辑的培养以及接触。博主我听了以后觉得先从基础打起肯定是好的。事实上我的这些大神的指点给了我很大的帮助。我建议如果没什么基础但是感兴趣或者一直想圆自己一个IT梦而因为其他事情耽搁的小伙伴们,可以跟我先前一样先从基础打起(时间有些久远,又是第一次写博客,难免整个博客看上去没那么溜,如有不妥之地,欢迎指教相互学习)。

好啦~废话不多说了,进入主题。

首先在博主看来,学习一门学科,不能盲目的一口气乱学一气,于是我花了一点时间请教我朋友在HTML这个板块中,挑选了一些基础易学、以后工作中可能会涉及的(有木有高考画重点的赶脚,哈哈哈哈~~~)。首先我们来了解一下HTML是什么?他的全称是“HyperText  Markup  Language (超文本标记语言)”既然叫“超文本”顾名思义一定也就不同于先前我们用到的普通文本类型,像text或者word;“标记”在后面呢~我会先后提到一些相关标记,也可称之为元素;“语言”你们可以这样理解,每门学科总有他独特的语法规则和格式来形成自己的语言;就像中文里的拼音声韵母、英文中的26个字母一样组成词或者单词最后一部分一部分连接语言。

今天我会给大家分享关于HTML中的一下几部分内容(博主写到一半发现,知识点整理起来有些繁琐,希望大家不要嫌弃;博主一直觉得学习贵在坚持,知识贵在积累,一点点疏清理解清了,其实很多时候并不需要我们死记硬背):

一、HTML的标记格式、规则以及HTML的一个整体网页结构。

二、另外还会给大家分享一下文本修饰的标记、排版标记、Body常见相关属性、HTML常用注释

三、DivSpan标记

四、网页中的颜色表示

五、字符实体标记以及项目符号

 

那其实在HTML中的标签主要分为双边标记单边标记两种;这两种标记的区分方式,对于双边标记来说,是有开始有结束;而单边标记是只有开始没有结束

双边标记格式:<标记名 属性名=“属性值”>要显示的内容</标记名>

示例:

<font  color=”red”>属性</font>

单边标记格式 <标记名 属性名=”属性值”>

它一般是起一些特殊的作用(在之后的总结中大家会陆续看到一些特殊的单边标记,相对比较少,也含有特殊意义)

上面单双边标记格式中提到的属性,我们可以与实际生活上的一些东西联系上,易于没基础的小伙伴进行理解。例如:人有五官、有手、有什么属于“属性”;可以玩游戏、可以打篮球;可以做什么理解为“方法”。

<人  姓名=小明” 身高=”168”  颜值=秒杀” />

HTML标记的规则

1.所有的HTML标记都是写在一对<>尖括号

2.所有的HTML标记都是固定不可以人为的进行修改

3.HTML标记可以有属性也可以没有属性  如果有属性 那么属性与标记之间必须要有空格 最少一个空格,属性与属性之间也要有空格 属性必须是写在开始标记

4.HTML标记是不区分大小写  建议使用小写

5.HTML标记只能顺序嵌套,不允许交叉嵌套

一个网页的HTML结构

<html>

<head>

<title>用于设置网页标题</title>

</head>

<body></body>

</html>

<html></html>当浏览器遇到这一对标记时 它就将这个文档中的内容按照网页的格式进行翻译  这一对标记包括两个子标记

<head></head>它是用于显示网页的头信息  这个标记中间的内容几乎在浏览器看不到 除了

<title></title>它是head标记的子标记  它的主要作用是用于设置网页标题

<body></body>这是网页的主体标记 网页中99%的内容都是通过这个标记来实现的

三、字体修饰标记

<b></b> 它是用于实现对内容进行加粗显示

<i></i>  它是用于实现对内容进行斜体

<u></u> 它是用于实现对内容增加下划线

<sub></sub> 下标

<sup></sup> 上标

<s></s>删除线

<font></font>  它主要是给文字设置颜色 设置大小 设置字体

font标记的常见属性

color :设置颜色  取值:red…….
size:设置文字的大小   取值:1~7  17

face:设置文字的字体   取值:face=”楷体”

 

四、排版标记

<p></p>表示段落

默认是居左对齐

常见的属性:

align :设置水平对齐方式  取值:left(水平居左)center(水平居中)right(水平居右)

<h1></h1>

………….

<h6></h6>

h1~h6标题标记   16

常见的属性:

align :设置水平对齐方式  取值:left(水平居左)center(水平居中)right(水平居右)

<br> 换行

<hr> 设置水平线

常见属性:

color设置水平线的颜色

size:设置水平线的粗细

width:设置水平线的长度  取值:百分比或者是固定值

noshade  去除阴影   没有值

<pre></pre> 预排版标记  它只有在PHP中用的很多  保留空格与换行  将标记的中内容原封不动显示在浏览器中

五、body标记的常见属性

bgColor:设置网页背景颜色

background:设置网页的背景图片

六、注释

格式:<!—注释的内容-->

注释的作用

1、起到一个解释说明性说明

2、方便程序员调试代码

七、DIVSPAN标记

这是两个双边标记  它没有什么特别作用 但是它们两个标记在CSS中用的特别多

divspan标记它们是两个盒子 盒子里面可以存放内容

块元素与行内元素

块元素它的内容为独占一行前后的内容另起一行进行排版 块元素可以设置宽度和高度

块元素:h1~h6pprediv

行内元素它不会独占一行 它前后的内容都会跟行内元素排在同一行  行内元素没有宽度与高度  它的宽度和高度是由内容来决定

行内元素:fontbiusubsupsspan

 

八、网页中的颜色表示

使用英文单词来表示  如:red   green   blue

使用十进制来表示  rgb(255,0,0)  rgb(0,255,0)  rgb(0,0,255)

使用十六进制来表示  #FF0000    #00FF00     #0000FF

rgb色彩模式

在自然界中,有三个基本颜色  (r)、绿(g)、蓝(b) 通过这三种基本颜色可以任意组合成其它的颜色

在计算机中如何混合出其它的颜色呢?一个基色它是用1个字节来表示 (11111111)共可以代表256个亮度(0~255)  三个基色共可以表示多少种颜色?256*256*256 = 1677万种

计算机它只能识别二进制

01

计算机中的进制

二进制 01                            运算规则  逢二进一

八进制 01234567          运算规则  逢八进一

十进制 01234567 89    运算规则  逢十进一

十六进制 01234567 89 ABCDEF   运算规则  逢十六进一

经过以上测试:要使用十六进制来表示颜色

十进制可以在CSS中使用

九、字符实体标记

>  表示大于号

<   表示小于号

表示一个英文状态下的半角空格

©  版权符号

×  表示乘号

÷  表示除号

®    表示注册

&   &

¥   人民币

十、项目符号

项目符号分为:有序列表与无序列表

无序列表

<ul>

<li></li>

<li></li>

<li></li>

</ul>

常见的属性:

type:是用于设置li标记前面的符号  取值:disc(实心圆)circle(空心圆)square(小方块)

有序列表

<ol>

<li></li>
<li></li>

<li></li>

</ol>

常见属性:

type:设置li标记前面的顺序  取值:1aAiI

start:设置从哪里开始   取值:要求是一个数字

好啦~今天的分享就先到这里,小博我要去准备后期要继续的分享的内容!按照我自己惯例:方圆百里只觉得自己是唯一的文艺青年。于是今天想送给有幸能看到这篇博的小伙伴们:人生在关键时刻主动给自己致命一击,就容易把磨难做成磨练----来自你连着十天私下学习居然半夜在这里一边听电台一边写博客的朋友

转载于:https://www.cnblogs.com/SummerSuSu/p/6028808.html

相关文章:

SLAM小结——求解退化问题解析(F、H、E)(面试经验总结)

总结&#xff1a; 1 Essential Matrix E t ^ R 为3*3的矩阵&#xff0c;奇异值为 [ u, u, 0] ^ T 的形式。为本质矩阵的内在性质。 性质&#xff1a;理论上综合旋转、平移共有6个自由度&#xff0c;因尺度等价&#xff0c;E有5个自由度。 求解&#xff1a;一般使用…

【Codeforces】1065B Vasya and Isolated Vertices (无向图的)

http://codeforces.com/problemset/problem/1065/B 一个图&#xff0c;给定顶点数&#xff0c;边数&#xff0c;求解最小孤立点数和最大孤立点数 最小的话&#xff0c;一个边连接两个顶点成为一个整体&#xff0c;如果最后有多余的点&#xff0c;那些就是孤立的点 最大就是找…

这些资源网站为什么能获得5万知乎大佬推荐,而我错失了什么吗?

现在很多朋友可能只要是一听到资源网站&#xff0c;想必就会好奇是什么网站&#xff0c;用用看是不是由说的那么厉害&#xff01;其实资源网站给我们的诱惑是在是太大了&#xff0c;其主要原因是可以帮助我们搜索到很多意想不到的资源&#xff01; 为了回应大家的需求&#xff…

大话Redis进阶

2019独角兽企业重金招聘Python工程师标准>>> 使用Redis过程中&#xff0c;总是会遇到各种各样问题&#xff0c;这里进行问题的总结&#xff0c;作为Redis 进阶的经验分享。 更新缓存的问题 [主动]需要操作人员去操作&#xff0c;或者定时调度[被动]由用户触发更新[预…

SLAM精度测评——EVO

1.install GitHub - MichaelGrupp/evo: Python package for the evaluation of odometry and SLAM 注意&#xff1a;安装好依赖&#xff01; sudo apt install python-pip pip install evo --upgrade --no-binary evo or pip install evo --upgrade --no-binary evo --user…

【UVA】10152 ShellSort (几只乌龟的故事)

https://vjudge.net/problem/UVA-10152 题目大意&#xff1a; 输入N&#xff0c;给你N个乌龟的名字&#xff0c;下面N行是初始状态&#xff0c;在下面N行是最终状态&#xff0c;你选中这只乌龟以后&#xff0c;只能把它移动到最上面&#xff0c;问怎么样操作步数最少&#xf…

python2与python3转换记录

为什么需要有两个版本的Python Python2和Python3不兼容是每个接触过Python的开发者都知道的事&#xff0c;虽说Python3是未来&#xff0c;但是仍然有很多项目采用Python2开发。Linux的许多发行版本(如Ubuntu)都会自带Python2.7&#xff0c;但是当我们准备开发一个Python3项目的…

oracle读书笔记之Oracle 11g R2 DBA操作指南(前三章)

Oracle 11g R2 DBA操作指南是我学习的第一本讲述oracle数据库知识的书籍&#xff0c;在此记录下自己的学习笔记&#xff0c;对于书中的知识点本人通过实际操作进行验证。1.Oracle数据库基础1.1.关系数据库1.1.1.关系数据库模型1.关系数据库模型三个核心概念&#xff1a;关系、属…

【UVA】11991 Easy Problem from Rujia Liu? (整数v第k次出现在什么位置)

https://vjudge.net/problem/UVA-11991 题目大意&#xff1a;就是给你一个序列&#xff0c;然后给出k和v&#xff0c;看整数v第k次出现在该序列的什么位置&#xff0c;没有的话就输出0 结构体&#xff08;略复杂&#xff09;&#xff1a; #include <iostream> #include…

面试题:2018最全Redis面试题整理

1、什么是Redis?Redis 是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a;Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次…

Android5.0如何正确启用isLoggable(二) 理分析

转自&#xff1a;http://www.it165.net/pro/html/201506/43374.html 概要 在上文《Android 5.0 如何正确启用isLoggable(一)__使用详解》中分析了isLoggable的使用方法&#xff0c;本文主要分析isLoggable实现原理以及user版系统root后永久enable isLoggable的原理&#xff0c;…

SLAM精度测评——rpg_trajectory_evaluatio

1. install https://github.com/ccxslam/rpg_trajectory_evaluation#install 下载catkin_simple&#xff1a;https://github.com/catkin/catkin_simple 建立工作空间 src下载&#xff0c;编译&#xff0c;然后下载rpg_trajectory_evaluatio,编译安装即可。 &#xff12;&a…

STL set multiset

STL容器大的方向分为两类&#xff0c;序列式容器和关联式容器。 这两者通过数据在容器内的排列来区分。关联容器和顺序容器的根本不同在于&#xff1a;关联容器中的元素是按关键字来保存和访问的&#xff0c;而顺序容器中的元素则是按它们在容器中的位置来顺序保存和访问的。 …

Windows 消息循环(1) - 概览

本文从消息循环是如何驱动程序的这个角度&#xff0c;对 Windows 消息循环进行概览性介绍。 使用 EN5 课件获得更好的阅读体验&#xff1a; 【希沃白板5】课件分享 : 《Windows培训 - 消息循环》https://r302.cc/q2d1jB 点击链接直接预览课件 1 程序是怎么跑起来的&#xff1f;…

得到的旋转向量和平移向量转换成旋转矩阵 (SE(3))

理论过程 头文件说明 1.使用罗德里格斯公式需要包含头文件为#include<opencv2/calib3d.hpp> 2.使用函数cv2eigen需要包含头文件<opencv2/core/eigen.hpp>&#xff0c;但是在则之前要包含一个对eigen定义的头文件&#xff0c;否则会报eigen.hpp文件的错&#xff0c;…

[译稿]同步复制提议 2010-09

2019独角兽企业重金招聘Python工程师标准>>> 同步复制9/2010议案 目录 [隐藏] 1 PAGE状态 2 有何不同之处这个补丁&#xff1f; 3 同步复制概述 4 用户视角 4.1 管理员视角 5 实现 5.1 STANDBY 5.2 MASTER 6 CODE 7 性能分析 8 尚未实现 9 &#xff0c;其他问题 PAG…

STL vector

1、vector是表示可变大小数组的序列容器。 2、就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的&#xff0c;而且它的大小会…

JavaScript 复习之数据类型

一、简介 JavaScript 的数据类型有 7 种&#xff1a; 数值&#xff08;number&#xff09;字符串&#xff08;string&#xff09;布尔值&#xff08;boolean&#xff09;undefinednull对象&#xff08;object&#xff09;Symbol&#xff08;ES6 中新增的类型&#xff0c;表示独…

Nginx反代配置

一、ngx_http_proxy_module模块ngx_http_proxy_module模块可根据用户请求的uri传递至后端服务器&#xff0c;实现反向代理命令&#xff1a;1.proxy_pass设置一个代理服务器的地址&#xff0c;协议&#xff0c;和一个可选的URI的位置应该映射。作为一个协议&#xff0c;“HTTP”…

STL queue priority_queue

queue 队列 queue 队列 就像排队一样&#xff0c;后来的排在后面&#xff0c;先来的先出队。所以只能对队首和队尾的元素进行操作 back()返回最后一个元素empty()如果队列空则返回真front()返回第一个元素pop()删除第一个元素push()在末尾加入一个元素size()返回队列中元素的…

镜头评价指标及测试方法(二)—畸变与分辨率

一、畸变 畸变&#xff08;distortion&#xff09;也称为失真&#xff0c;是由于光阑球差的影响&#xff0c;不同视场的主光线通过光学系统后与高斯像面的交点高度不等于理想像高&#xff0c;两者之差就是畸变。因此畸变只改变轴外物点在理想面上的成像位置&#xff0c;使像的形…

优秀Java程序员应该知道的20个实用开源库

一个优秀且经验丰富的Java开发人员的特点之一是对API的广泛了解&#xff0c;包括JDK和第三方库。我花了很多时间学习API&#xff0c;特别是在阅读Effective Java 3rd Edition之后&#xff0c;Joshua Bloch建议如何使用现有的API进行开发&#xff0c;而不是为常用的东西写新的代…

sersync 同步

Sersync数据同步rsync是类unix系统下的数据镜像备份工具——remote sync。一款快速增量备份工具 Remote Sync&#xff0c;远程同步支持本地复制&#xff0c;或者与其他SSH、rsync主机同步。它的特性如下&#xff1a;v 可以镜像保存整个目录树和文件系统。v 可以很容易做到保持原…

python-opencv 形态学

五、形态学运算 检测边和 角点 形态学算子检测图像中的边缘和拐角&#xff08;实际用&#xff1a;Canny或Harris等算法&#xff09; 5.1 检测边缘 形态学检测边缘的原理&#xff1a;在膨胀时&#xff0c;图像中的物体会想周围“扩张”&#xff1b;腐蚀时&#xff0c;图像中的物…

【 HihoCoder】1082 The Marshtomp has seen it all before (暴力 或 脑力)

https://vjudge.net/problem/HihoCoder-1082 暴力 #include <iostream> #include <cstring>using namespace std;char s[205];int main() {int i;while(gets(s)){i 0;int len strlen(s);while(i<len){if((s[i]m||s[i]M)&&(s[i1]a||s[i1]A)&&am…

java 多维数组转化为字符串

int[][] a {{1,2,3},{4,5,7}};System.out.println(Arrays.deepToString(a)); Arrays.deepToString()此方法是为了将多维数组转换为字符串而设计的。 三维二维都可以解决;转载于:https://www.cnblogs.com/lishuaiqi/p/10428612.html

python-opencv 轮廓检测

轮廓检测 图像处理中经常用到轮廓检测,OpenCV-python接口中使用cv2.findContours()函数来查找检测物体的轮廓。 import cv2img cv2.imread(D:\\test\\contour.jpg) gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY) ret, binary cv2.threshold(gray,127,255,cv2.THRESH_BINARY)…

JavaDate类

在JDK1.0中&#xff0c;Date类是唯一的一个代表时间的类&#xff0c;但是由于Date类不便于实现国际化&#xff0c;所以从JDK1.1版本开始&#xff0c;推荐使用Calendar类进行时间和日期处理。这里简单介绍一下Date类的使用。1、使用Date类代表当前系统时间Date d new Date();Sy…

Jupyter Notebook使用教程

1、启动 在终端中输入以下命令&#xff1a; jupyter notebook --allow-root执行命令之后&#xff0c;在终端中将会显示一系列notebook的服务器信息&#xff0c;同时浏览器将会自动启动Jupyter Notebook。 启动过程中终端显示内容如下&#xff1a; $ jupyter notebook [I 08…

一次性理清JavaScript变量等高难度面试问题

主要是解决JavaScript中比较难懂的部分&#xff0c;当然了&#xff0c;这部分经常在面试题中露面&#xff0c;这篇文章主要是讲解解题思路&#xff0c;对新手会有很大帮助&#xff08;如果你仔细看的话&#xff09;。书籍方面&#xff0c;我看的是《你不知道的javascript》,精髓…