1.前端工程师是干什么的？
           PC页面
         移动端页面

Web开发 = 前端开发 + 后台开发--->web应用(网站)

后台：数据

前台：负责数据展示 + 交互效果

2.需要学习的内容有哪些？
工具部分：ps(处理图片) IDE(开发工具) 标注工具
编程语言： html、css、javascript

3.html、css、JavaScript是干什么的？作用是什么？

html:超文本标记语言，搭建网页结构
css: 层叠样式标，修饰html样式让网页更好看
js: 负责页面的交互效果

4.开发环境的搭建
IDE:集成开发环境 ，写代码的工具，推荐hbuilder
浏览器：IE(不推荐) Chrome(谷歌 推荐) safari(苹果) firefox(火狐)

5.html文档结构
a.html 超文本标记语言 特点:以.html结尾
b.文档格式 通常成对出现
               <html>
                     <head>
                            <title>这个是我的第一个网页</title>
                    </head>
                    <body>
                           hello world！
                    </body>
              </html>

6.html元素之间的关系
html元素包括：开始标签<html>+元素内容+结束标签</html>
父子关系、兄弟关系、子孙关系、后代关系
特点:html元素之间是可以无限嵌套，书写的时候，换行缩进写

7.总结:
html:超文本标记语言，超文本（和纯文本相比功能比较丰富，可以加图片...），标记(标签)，整个html文档都是由标签组成
如何能够学好html语言：每个html标签的名称和功能，背，和学习英语26个字母是一样的

8.注释
语法:<!--这里是注释内容-->
特点:注释内容不会被显示到浏览器上

9. <br />标签表示 换行

10.字符实体
HTML文档中有些字符具有特殊含义，最明显的就是<和>这两个字符。有时候需要在文档内容中用到这些字符，但是又不想被当做HTML来解析处理。因此，产生了字符实体，也就是html实体。实体是浏览器用来代替特殊字符的一种代码

11.标签：要学好html就必须记住html标签语法及特点

<!DOCTYPE html>：表示文档内容为html5的版本声明

html标签：
        语法：<html></html>
        特点：包裹所有的其他标签，是html最外层的元素

head标签：表示网页文档头部部分内容
        语法：<head></head> 
        特点：包含有文档编码声明，网页名字等内容

body标签：表示网页文档主题部分内容
        语法：<body></body>
        特点：所有的网页内容都放在body中

<meta charset = "UTF-8">:是head标签的儿子，表示文档的编码，相当于告诉浏览器html5对应 的密码本

title标签:标题表标签
        语法：<title>网页的名字</title>
        特点：是head标签的儿子，用于表示网页的名字

div标签：表示一个区块或者区域，你可以把它看成是一个容器，比如说一个竹篮
       语法：<div>这里是一个容器</div>
       特点：用来把网页分块并且里面可以装任意的html元素,并在div结束后带有换行效果

span标签：和div标签类似
       语法：<span></span>
       特点：span内容结束后不会换行

h1-h6标签：表示6个级别的标题大小 
       语法：<h1></h1>
       特点：h1到h6,大小逐渐减小

p标签：段落标签，通常用来装一整段文字，在一篇文章中常用 
       语法：<p></p>
       特点：是文字内容具有段落行间距

hr标签：水平分割线标签
       语法：<hr />
       特点：打印一条水平分割实线

ul-li标签：ul为无序列表标签，li为每个列表项目
       语法：<ul>
                      <li></li>
                      <li></li>
                      <li></li>
                       ...
                </ul>
       特点：常用于制作各种菜单、排行等

i em strong hr br标签：i、em标签表示斜体 strong标签表示加粗 hr标签表示水平分割实线 br标签表示换行
       语法：<i></i> <em></em>两个同样的效果
<strong></strong>
       特点：略
     img标签：图片引入标签
      语法：<img src="地址.图片格式" alt="这是一张图片" title="图片信息"/> 
      特点：需要加属性才能展示图片,alt属性在图片没法显示的时候用文字提示用户这里是一张图片
                                                          title属性在当鼠标移动到图片上时，用文字提示用户这张图片信息
                                                          地址问题：
                                                                      绝对地址：当前的图片在硬盘上的地址，可移植性差
                                                                      相对地址：1.图片与代码文档同级的地址访问格式"图片名.图片格式"
                                                                                        2.图片不在同级的地址访问格式"./文件夹/.../图片名.图片格式"
                                                                                        3.图片在代码文档的上一级地址访问格式 "../文件夹/.../图片名.图片格式"

a标签： 超链接标签，可以链接一切资源(包括网址，视频，文字等)
       语法：<a href="网址" target="_blank"></a> 
       特点：需要加属性才能体现功能,target属性中的"_blank"值用于打开链接网址的同时新建一个窗口，原窗口保留

12.html大总结：
             1.html是什么？html有什么用？
             2.如何去使用html?
                     a.html结构
                     b.html元素之间的关系
                     c.注释，字符实体
                     d.常用标签(重点) 标签名称及功能
             3.HTML是最简单的一门语言

HTML——HTML部分学习笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. 在js中网页面写入数据时需要注意的几点

    网页代码 <tbody id="t_gun"> <s:iterator value="gunList" status="st&quo ...

  2. 潭州课堂25班：Ph201805201 tornado 项目 第六课 用户和图片分享的集成（课堂笔记）

    tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来  辅助用户上传的图片,生 ...

  3. request请求携带证书,如：微信企业零钱付款

    const Promise = require('bluebird') const request = Promise.promisifyAll(require('request')) const w ...

  4. Egret--设置全屏，控制浏览器全屏

    1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...

  5. 转 InnoDB Error Handling

    14.20.4 InnoDB Error Handling Error handling in InnoDB is not always the same as specified in the SQ ...

  6. 51nod 1617 奇偶数组

    传送门 回来看一眼51nod,发现自己掉到rank4了,赶紧切道题回rank3. 一眼不会做,这种东西应该慢慢找规律吧……然后看到数据范围其实比较小,应该是单次log的,那是不是可以分治啊. #inc ...

  7. 图片编辑工具GIMP

    今天修改图片: 给图片添加alpha通道,选中要删去的部分,就会变成透明,要保存为png格式 文库参考: http://wenku.baidu.com/link?url=HR1lKoBKS1xbhUJ ...

  8. __x__(48)0910第六天__CSS Hack

    CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...

  9. Node.js_简介及其 npm 包管理器基本使用_npm_cnpm_yarn_cyarn

    Node.js 既是语言也是平台,跳过了 Apache.Nginx 等 HTTP 服务器,直接面向前端开发 JavaScript 是由 ECMAScript.文档对象模型(DOM)和浏览器对象模型(B ...

  10. [LeetCode] N-ary Tree Preorder Traversal N叉树的前序遍历

    Given an n-ary tree, return the preorder traversal of its nodes' values. For example, given a 3-ary  ...