2019-11-09HTML基本标签

首先得明白HTML它不是类同于C,JAVA,C++之类的编程语言,它是一种超文本标记语言,全称hypertext markup language.它由许多标签对来组成,下面我简单介绍下自己了解到的一些标签。(初学者)

大体架构:

<html>(html后面可以跟一个lang="en"/"zh"或者其他的,目的就是告诉搜索引擎你这个是关于什么的,en代表英语,zh代表汉语)

     <head>里面放给浏览器看的东西,我们人是看不到的</head>

   <body>里面放给我们人看的东西,它会展示出来</body>

</html>

下面说说head标签里面放些什么吧。肯定有个<meta charest="utf-8">,这个什么意思呢?现在目前通用的一般有4个编码字符集,gb2312,gbk,unicode,utf-8。最初呢有个gb2312,它可以让计算机识别几乎所有种类亚洲文字,但是!它不能识别如今台湾还在用的繁体字,这样它肯定是不合格的,于是乎来了个它的扩展版本gbk,这个就完善了上面的问题。unicode呢它叫万国码,utf-8呢是他的一个升级版本。感兴趣可以自己去了解一些编码字符集。回到这个标签<meta charest="utf-8">,于是乎我们就把utf-8往那一囤就完事了嗷~。你想想,肯定还有个放网页标题的鸭,这个用<title>写你想放的标题</title> 。嗯,,,如果你想要优化搜索引擎,你可以多了解meta这个标签,它是对网页一些属性做出定义的,它里面可以放很多,例如介绍网页是干嘛的用keywords,描述它用description.

嗯,,,body里面没什么好说的了,就是加东西展示出来。下面说说标签吧。p标签:<p></p>,顾名思义paragraph就是段落的意思。例如:<p>这个是一个段落哟~</p>那么展示的时候它将会是自己的一个段落,因为你不声明的话,html它排版就是往后堆叠,如果后面放不下就换行。h标签:<h>标题</h>,有h1,h2,h3,h4,h5,h6.这个标题是展示在网页中的,就像我们平常做的ppt的几个几个标题一样。strong标签:如果你想加粗某些字体可以用这个标签,如:<strong>派大星</strong> 那么你会看到派大星和其他字体比较明显粗一点。有加粗还有斜体标签em如<em>海绵宝宝</em>.标签是可以套着的,如果你想既加粗右斜体,那么你可以把这两个标签套起来用。del标签:我们经常在淘宝上看到某些衣服打折什么的,他就会吧原价划一横,这个就是靠del标签实现的,如<del>$399</del>,这样展示出来的¥399就会被划一横。下面说两个有点不一样的标签:<div></div>;<span></span>这两个标签呢,和前面几个简单的标签有点不一样,当你在他们之间加东西时你会发现div有和没有一个样,span还有个换行的功能。但是!它!不是和前面几个标签一样,他不是这么用的它的作用1.充当容器作用,将页面分块结构化2.捆绑作用。 什莫意思呢,第一点就是说我们一般写代码会将它规划,比如这个导航栏的代码我放到这一块,那一个功能的代码我放到这一块,这样就结构清晰,便于维护了,而放就是放到我们说的这两标签里,这样他们就是在一个容器里了。第二点就是说假如好多东西在我这个容器下,我想要对他们做同一个效果,我就可以在div或者span里面操作一次,不用对下面的东西每个都操作一遍,相当于现在有10个东西,我想将他们搬到一个地方,如果我一个一个搬要好几次,但是我将他们全部放到一个箱子里的话,我就只用搬箱子操作一次。接下来说说空格呗,空格它实际上是起到字符分割的作用。假设我们想在 “我爱派大星”之间在我爱后面加几个空格,我们加完后会惊奇的发现展示出来只有一个空格,因为一个就是分个了,你多加几个没个鸟用。可是我就想展示几个空格呢,,,用html编码&nbsp;又要说到html编码的话,它由 &加一些东西;所组成,常见的有三个哈 &nbsp;相当于一个空格。&lt;相当于标签的做尖括号。&gt;相当于标签的右尖括号。即然都说了html编码,再来一个小小知识:单标签。HTML里面几乎标签全是成对出现的,也有单个出现的,就是他们自己就有意义,不用对里面的东西构成功能,老规矩,3个。回车:<br>. 描述属性的<meta>.水平线<hr>.

简单标签基本上说完了,来几个有点难的。有序列表<ol></ol>,它里面一般放几个<li></li>标签。li标签里面放要排序的东西,比如按世界最帅的人来排,依次可以放 “我自己”  “我自己2号”  “我自己3号” 等等。那么这样展示出来的效果小伙伴可以看看它是甚麽样的,1.我自己   2.我自己2号  3.我自己3号。排序有门道,ol里面可以放属性type=" "五个值:1,a,A,i,I.依次就是排序方式用阿拉伯数字,小写字母,大写字母,小写罗马,大写罗马数字来表示(不写就默认阿拉伯数字排)。属性start=" ",不管你用那种方式记录,你想从第几个开始排,就写阿拉伯数字几就可以了。属性reversed="reversed"加了这个就能让他倒着排序。无序列表<ul></ul>,它里面也会放几个li列表。但是他只有一个属性type="disc"/“square”/“circle”,依次为实心圆,实心方块,圈圈。不写就默认为实心圆。ul它常用于导航栏。放图片的标签<img src=" ">,src后面加图片路径,如果图片来源于网络,那就右击图片,选择在新标签页中打开,复制路径粘贴过来就可以了。如果图片来源于自己计算机,那么分两种情况,1.绝对路径:此图片和你这个网页不是保存在同一根目录下,那麽此时就要将图片完整路劲写齐了。2.相对路径,如果他们在同一根目录下,那么只写出相对路径。(标签里通常会加style=" "用来设置图片大小,背景颜色啊什么什么的,这个是css.可以了解一下,光靠html写的东西就是纯文本。。。)标签里面有属性alt=“”,这个叫图片占位符,目的是倘若图片地址失效或者别的什么原因展示不出来,那麽他就会出现alt后面的提示,比如我本来是展示了一张海绵宝宝的图片,如果我在标签里假设alt="这是海绵宝宝",那么假设我的图片展示不出来,此时就会出现这是海绵宝宝字样。标签里还有属性title=" ",这个叫图片提示符,我们会发现有时候我们将鼠标移到一张图片上时,我们会看到它显示了一些提示信息,还是海绵宝宝的例子,如果我在img标签里加了tille="这是派大星好基友",当鼠标移到图片上时便会出现此字样。<a herf=" "></a>这个是引入超链接的,herf后面加复制过来的网址,如果想给它命名并在新的页面中跳转,那么两个括号间可以加上东西,比如:<a herf="http://news.baidu.com/">新闻</a>,这个就是百度页面右上角的新闻,你点击后就会跳转到另一个页面。他除了有超链接,还有锚点,打电话,发邮件的功能。锚点就是类比于我们阅读是的那个点击回到顶部一样,点一下就回到指定位置。打电话<a herf="tel123456789"></a>发邮件<a herf="mailto2422391979@qq.com"></a>.最后来个form表单:<form></form>,它里面常常会放input组件。form里面有属性method="get"/"post",就是发送方式,action=" 加地址",就是接收方。倘若要输入框,<input type="text";name=" ">,密码框:<input type="password";name=" ">其中name是自己取得,就是你输入的是什么玩意儿,随便命名。但这样还无法登录,需要提交字样,用<input type="submit";value=" ">value后随便写啥,登录,login啥的都行,不写默认字样为提交。如果需要选择题,就用<input type="radio"; name=" ";value=" ">如果想把几个选项归为同一道选择题,就把name命名为相同就可以了,value 后加选项。

如果还有不懂的可以看看https://ke.qq.com/course/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,107评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 一、学习目标 主要是学习web开发中的一些基本性的概念,例如b/s架构,web服务器,dns等等。同时还要学习HT...
    我爱开发阅读 736评论 0 7
  • 懒惰的种子发芽特别快,也容易养成习惯。 这几天荒废了的有 1.4点早起,原因是晚睡。 2.吃零食,原因是控制不好自...
    快乐番茄阅读 178评论 0 0