HTML5学习笔记(一)

1、web开发=前端+后端;

1.1 web开发是什么?

    \bullet 前端就是那些在客户端上的应用,通常指的就是我们的浏览器。最常用于前端开发的技术是HTML+CSS+JavaScript(三剑客),前端开发人员通常综合使用这些技术进行开发;

    \bullet 后端开发就是编写那些运行在服务器上的代码,通常来说,这部分的工作需要和数据库打交道,比如读写数据、文件、实现业务逻辑等;

 1.2 web发展史:(万维网:Word Wide Web)--Mosaic--IE---W3C

     \bullet  HTML发展史

    \bullet CSS发展史

 1.3 用什么编辑器进行Web开发才是最好的?

    现阶段用普通的文本编辑器就可以了(有些编辑器可以实现代码补全、语法高亮、多行筛选、自动索引等功能,提高开发效率),但学习阶段就是让大脑和手指记住代码的节奏;

 1.4 第一个程序:

html文件.jpg


结果.jpg

    \bullet HTML是用来描述网页的一种语言,官方指的是超文本标记语言(Hyper Text Markup Language);

    \bullet HTML中是以一对一对的标签描述网页的的,第一个称作开始标签,第二个称作为结束标签,结束标签多了个/,开始标签和结束标签之间的内容称作为元素,关键字成为元素的名称,标签之间的内容为文本内容;

    \bullet 第一行为声明;html元素描述整个网页的所有内容;head元素是所有头部元素的容器;body元素是包含了所有网页里面可见的内容;h1表示标题的尺寸,最大,比其小的有h2,h3.....h6,p表示的是一个段落;

1.5 基础标签:

     \bullet <!DOCTYPE html>是一个声明,表示该文档是由HTML5进行编写的;

    \bullet <!--...-->用来源文档中插入注释。注释不会在浏览器中显示;条件注释:<!--[if IE 8]>....some HTML here......<![end if]-->,只针对IE浏览器;HTML中使用JavaScript经常使用这种注释:

                               \bullet <script type="text/javascript">

                                <!--xxxxxxxxxne内容xxxxxx//-->

                                   </script>

    \bullet <body>标签定义文档的主体,body元素包含文档的所有内容(比如文本。超链接、图像、表格和列表等等);

    \bullet <h1>-<h6>标签可定义标题,<h1>定义最大的标题,<h6>定义最小的标题,由于h元素拥有确切的语义,因此需要慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小

h1-h6

    \bullet <html>元素用于告诉浏览器其自身是一个HTML文档,<html>与</html>标签限定了文档的开始点与结束点,在它们之间是文档的头部和主体,而文档的头部由<head>标签定义,而主体由<body>标签定义;

注意:即使html元素是文档的根元素,它也不包含doctype元素。doctype元素必须位于html元素之前。

    <head>标签用于定义文档的头部,它是所有头部元素的容器,<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。下面这些标签可用在head部分:<base> <link> <meta> <script> <style> <title>;

注意:<tiitle>是head部分中唯一必需的标签。

    <p>标签用于定义一个段落,p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间,自己也可以通过样式表进行约束;

<p>

    \bullet <title>标签用于定义文档的标题,浏览器通常将其内容显示在浏览器窗口的标题或状态栏上;

注意:<titile>标签必须位于<head>标签内部,如果把网页加入用户的链接列表或者收藏夹、书签列表,title元素的内容将成为该网页链接的默认名称。

1.6 Requirement:用<img>标签显示成电校徽;用 <a>标签增加一个超链接跳转到论坛

    \bullet <img>标签用于向网页中嵌入一幅图像。从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用的图像的占位空间,img无结束标签--空标签;

注意:<img>标签有两个必需的属性:src属性和alt属性。

<img>标签的属性表

    \bullet <a>标签用于定义超链接,超链接可以让用户从一个网页跳转到另一个网页。

注意:<a>标签最重要的属性是href属性,它指定了链接目标的URL


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,118评论 0 0
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,069评论 0 16
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,336评论 0 7
  • HTML5发展历程 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成...
    SigerSun阅读 255评论 0 0