WEB前端开发基础学习-html

9113969-ff37899ceb04d044[1].png

服务器就是一台专门为用户服务的电脑,服务器中放着对应的首页内容,浏览器在地址栏输入网页地址并回车之后通过互联网浏览器会对网页地址对应的服务器发送请求,由服务器端的软件把服务器端首页的内容返回给浏览器,并且把首页的内容下载到用户的电脑上面,然后在浏览器中显示下载到的页面。
9113969-04549438b17536c3[1].png

DNS就是下面所说的域名解析系统。
9113969-e6f106fecff30ebe[1].png

浏览器去访问百度的服务器ip大部分用户记不住,但是大部分用户可以记住www.baidu.com,域名解析系统会把网址发送到域名解析服务器上帮助查看该网址对应的ip地址,然后返回到浏览器中对应的ip地址,浏览器会去访问具体的服务器,最后服务器会返回网页的内容。

QQ图片20180102102036.png

人的骨骼相当于HTML结构,衣服鞋子相当于CSS表现,行走奔跑跳跃就是javascript行为。

URL协议:
QQ图片20180102163326.png
QQ图片20180102163732.png
URL编码:内容转换为ASKII码值的过程,URL中的非ASCII码转为%%ASCII码。

为了使世界上的国家能够显示别国的语言。


QQ图片20180102164657.png
QQ图片20180102104236.png

http://www.runoob.com/try/try.php?filename=tryhtml_intro
<!DOCTYPE html>
//<!DOCTYPE>文档声明是一个 HTML 标签,它是用来告知 Web 浏览器页面使用了哪种 HTML版 本标准。在使用CSS时,文档声明标签会严重影响页面效果。
html是HTML5 中的文档类型,常见的还有HTML 4.01 和XHTML 1.0都规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset,以及XHTML 1.1。
文档类型不同他们所包含的元素也有可能不同,比如<audio>只有HTML5中包含,而Strict、Transitional 和 Frameset,XHTML1.1这几个文档类型却不包含它。

<html lang="en">
// <html>元素是 HTML 页面的根元素,<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。lang标签可以让搜索引擎了解该页面是以什么语言为主。

<head>
//文档的头部由 <head> 标签定义
一般用来申明使用的脚本语言,以及网页传输时使用的方式等 特效所使用的脚本语言插在这里。
head标签中包含的是给浏览器用的东西。
<meta charset="utf-8">
//告诉浏览器这页代码的编码格式,告诉浏览器器此页面属于什么字符编码格式,下一步浏览器做好“翻译”工作。常见的字符编码有:gb2312、gbk、unicode、utf-8。例如:如果你的网页里面出现了中文,在头部没有”utf-8“的话,将会导致中文乱码。UTF-8包含全世界所有国家需要用到的字符,是国际编码,通用性强。
当浏览器解析当前的文档的编码和文档实际的编码不一致的时候会出现乱码的问题。
<title>菜鸟教程</title>
//用来定义文档的标题,这个标题会显示在浏览器的标题栏上


F)9QEH2OZD`HR87VB8[`@HO.png

比如我们可以查看本页面的源代码,可以找到<title>写文章 - 简书</title>,我们把这个页面保存为书签:
当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
<title> 标签是 <head> 标签中唯一要求包含的东西。
</head>
<body>
//文档的主体由 <body> 标签定义。
body标签在HTML中只能使用一次,通常你想要显示的网页内容都放在body中。body标签是网站显示给用户看的内容。
<p>我的第一个标题</p>
<h1>标题</h1>
//<h1> 元素定义一个大标题,hx(x=1-6)随着x的增加标题的字会越来越小。


QQ图片20180102190647.png

<p>2shdjkasdhaskhdj</p>
//<p> 元素定义一个段落,我试了试如果直接用enter代替换行的话,在网页中只会变成一个空格,所以另起一段的话需要再写一个<p></p>。
</body>
</html>

id属性

http://www.w3school.com.cn/html/html_links.asp
查看源代码可以找到![[PPHTXOY83E0DY)QE82IYH.png
下面的是 HTML 文档的锚
上面是指向该锚的链接,当我们点击这个连接页面就会跳转到锚这里。
如果不在同一页面只需要在该页面的网址后面加上#+锚的名字,点击后就会直接跳转到这个页面的锚的位置。
插入图片:
<img src="123.jpg" width="258" height="39" />
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。
如果是子目录,例如images里面,就用images/123.jpg
如果是本目录直接输入文件名"123.jpg"。
如果要把其他网页中的地址插入到自己的网页中的话,直接右键查看该图片的属性中的URL地址,让src=URL。
htm 与 html 的区别:
推荐使用长后缀名 html 。
前者是超文本标记(Hypertext Markup)
后者是超文本标记语言(Hypertext Markup Language)
可以说 htm = html
同时,这两种都是静态网页文件的扩展名,扩展名可以互相更换而不会引起错误(这是指打开而言,但是对于一个链接来说,如果它指向的是一个htm文件,而那个htm文件被更改为html文件,那么是找不到这个链接的)

QQ图片20180102174301.png

QQ图片20180102174839.png

QQ图片20180102175240.png

QQ图片20180102175322.png

QQ图片20180102195754.png
QQ图片20180102202411.png

实例如下:


QQ图片20180102202355.png

表格标签的使用:


QQ图片20180102204818.png

table代表整个表格,一个tr代表一行表格,一个td代表一个单元格。
QQ图片20180102205826.png

thead代表表格每一列的头部标题
<thead>
<th>列名1</th><th>列名2</th><th>列名3</th><th>列名4</th>
</thead>
1 2 3 4分别会对应显示到每一列的第一行的头部。


QQ图片20180102205816.png

单元格合并:


QQ图片20180102210756.png

QQ图片20180102210737.png

rowspan合并行,colspan合并列。

块级标签独占一行,行级标签和其他行内标签共用一行:


QQ图片20180102211844.png

实例如下:


QQ图片20180102212017.png

QQ图片20180102211919.png
QQ图片20180102211945.png

div标签占用一整行,span标签只占用它所在的一块。

表单:
QQ图片20180102212354.png

<form></form>
功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
语法:<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. . .</FORM>
属性解释见下表:
action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.


![QQ图片20180102214243.png](http://upload-images.jianshu.io/upload_images/9113969-d24290664ad2f913.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
QQ图片20180102214417.png

生成的网页内容如下:


QQ图片20180102214243.png

普通的下拉列表:


QQ图片20180102213439.png

QQ图片20180102215240 - 副本 (2).png

value 属性规定在表单被提交时被发送到服务器的值。如上面的内容被提交到服务器时会收到name=1或者2,而不是name=公历或者农历。

可以多选的下拉列表:select中加入multiple=“multiple”


QQ图片20180103103657.png
QQ图片20180103103714.png

以及默认选项:input中是checked=“checked” select中是selected=“true”
如下:我在男的input标签中加入了checked 3的input标签中加入了checked,刚打开浏览器时它会自动选择上男和3。

QQ图片20180103104245.png
QQ图片20180103104232.png

单选框type=radio,多选框type=checkbox。
单选框中的name属性代表男女是一组的属性,只能选择一个。

QQ注册表单实例:
QQ图片20180103113232.png

QQ图片20180103113243.png

快速生成顺序数字的技巧:


QQ图片20180103112627.png

QQ图片20180103112636.png

feldset标签实现表单分组:


QQ图片20180103114115.png
QQ图片20180103114051.png
表单总结:
QQ图片20180103115144.png
QQ图片20180103115217.png
QQ图片20180103120213.png

QQ图片20180103121627.png
QQ图片20180103122105.png

QQ图片20180103121957.png

meta标签对网页内容无任何作用,他是为了与搜索引擎匹配度更高,与搜索内容越符文,则搜索排名更靠前,关键词越少权重越高,但是被搜索的概率降低。它包含在head中。


QQ图片20180103132039.png

KeyWords:

Keywords又叫关键词、关键字,其就是一个网站管理者给网站某个页面设定的以便用户通过搜索引擎能搜到本网页的词汇,关键词代表了网站的市场定位。网站的首页关键词至关重要。首页网站关键词代表了网站主题内容,内页和栏目页的关键词一般紧扣页面主题,代表的是当前页面或者栏目内容的主体。
密度
keywords密度是指keywords出现的次数和keywords关联字词出现的次数与整个网页文本之比,keywords在文本中出现的次数越多,那么keywords密度越高,反之就越低

Description:
在网站建设中,Description是出现在页面头部的 Meta 标签中,用于记录本页面的概要与描述!
Description作用:Description出现在网页的<head></head>;之间meta标签之一,可称为“内容标签”,“描述标签”或“内容摘要”可以预见在以后的用户搜索中Description会扮演越来越重要的技术之一。
作用1.简单大概描述你网站的主要内容,主要是让用户了解观看的,在百度或google搜索某个关键词的时候会看到每个搜索结果的下面都有一段描述,这段描述就是Description的内容。
作用2.给搜索引擎提供了一个很好的参考,缩小了搜索引擎对网页关键词的判断范围,(所以不要小看description)。
作用3.引导SE和指明UE的一个路标
格式:
<meta name=”description” content=”这里就是Description的提要内容” />;标准网站description写法description,是不能直接看到的,是用来判断整个页面内容的,当中要写入的内容是你页面内容的简介,最多79个字。

Meta标签中Keyword和Description的权重:
从严格意义上,Meta 标签中的Keyword(关键词)、Description(描述)属于历史遗留问题。在早期的Web页面上,Meta 标签中的Keyword与Description用来描述页面的主要内容及向搜索引擎和访问用户介绍网页包含哪些方面信息,在HTML代码中,其被置于<head></head>之间。
  应该说,Meta 标签中的Keyword与Description曾经在搜索引擎优化中占据非常重要的地位,在搜索引擎的算法还比较初级,无法通过对网页的全部内容进行有 效分析以判断相关性的时候,meta标签提供了一种简略的方式来对搜索关键词作出反应,那时候,通过合理地组织Keyword与Description, 并进行“适度的填充”,就可以使网页的SERP页面中得到良好的排名。

随着搜索引擎算法的不断提高,当然,同时也随着Meta标签中的Keyword与Description“填充”技术的泛滥,“black hat” SEO将其演变成了一种基本的作弊手段,各大搜索引擎逐步下调排名算法中Keyword与Description的权重。到了今天,其作用已经微乎其微, 虽然仍可见不少所谓的“SEO专家”仍在宣传那种过时的观点,仍在告诫用户Keyword与Description的重要性。

虽然不能肯定地说,Meta Keyword与Description完全没有任何作用,但是,对许多搜索引擎而言,其与关键字填充的界线并不遥远,同时要注意精简。另外,在网站优化 中,对Meta标签中的Keyword与Description不必投入太多精力,相比较而言,其他因素如Title、heading的作用更为巨大。当 然,内容则更为根本。与其将过多的精力投入到这上面,不如更专注地增加有价值的内容。


image.png

base标签可以让当前页面中的所有的a标签都拥有相同的属性,比如targent属性。

不常用语义标签:


image.png

<pre>标签中不进行空格的合并。

image.png

如果想要在HTML页面实现HTML代码,就需要用到特殊字符的替代代码。
比如:
<p>这里是一个段落</p>
它在网页中显示的是“这里是一个段落”而并不会显示出<p>标签,那么如果我们想要显示出来<p>标签,我们就需要用到特殊字符的替代代码来实现。


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

推荐阅读更多精彩内容

  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,084评论 2 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,466评论 1 45
  • 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索...
    翻滚吧海阔天空阅读 4,001评论 5 14
  • 恰然 侧逢着姣透的双眼 即伴着芳逸的眉秀 俏翘着丝敛的尾唇 止不住的清流 萦绕牵远的山川 那匹桀骜野马 涣然收敛不羁
    仅仅是蓝天吧阅读 185评论 0 0
  • 想成为一个拥有自己的小习惯,生活有自己的原则和规律的人,应该很酷吧。 希望自己可以做自己喜欢的事,可以做的越来越好...
    ColdAsMySoul_阅读 297评论 0 0