---恢复内容开始---

学习网站：W3School

一、HTML的认识

纯文本语言：只显示内容，不显示样式，也不能描述语义的文档，但是也不会乱码

语义：数据的含义就是语义，数据是符号，在这表示标签

文件格式：txt只保存内容，不显示样式，而doc不仅显示内容，也显示样式，两者在保存相同的内容时，doc的文件占用内存比较大

常见纯文本：记事本、Java、HTML、CSS、JavaScript等

二、 HTML的基础知识点

HTML是负责描述文档语义的一种标记语言

HTML有文本、图片、链接、视频、音乐等

注意：html没有样式，是用来添加语义的排版，实际上就是文本的嵌套使用，而CSS是用来定义样式的

HTML (hyperText Markup Language):  也叫超文本标记语言

超文本：是因为它可以导入超链接，将空间中不同的数据进行连接，所以叫超文本

基本骨架：

<html>

<head>

<meta charset="UTF-8">

<!-- 浏览器的标题 -->

<title></title>

</head>

<body>

</body>

</html>

<!DOCTYPE html>:文档声明头，声明使用的是html的文档类型  (DocType Declaration)，任何一个标准的HTML页面，第一行一定是文档声明头

我们大多数学的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。

HTML和XHTML的区别：XHTML严格体现在小写标签、闭合、引号

Strict：表示当前模式的要求更加严格，指定有些标签不能使用，如U标签（是指加上下划线的标签，也就是样式，这和HTML就产生了冲突，HTML只负责语义，不负责样式的）

我们使用的一般是Transitional(普通的)的版本，没有严格要求

(U标签：)

基本标签：

<body></body>：里面显示文本、图片内容、链接等网页内容

<h1></h1>一级标题(主标题) <h2></h2>二级标题…  h1->h6定义标题语义，显示不同的标题(headline)大小

<p></p>段落。里面的是内容

<a></a> 指向链接

<img src="" alt=“这里用来调用图片失败的识别说明”>图片

<br>换行

字符集（Character Set）：当前计算机不能识别汉字，而是通过二进制来存储编码，计算机记录的实际是根编码

eg：  <meta charset="UTF-8">     meta(便签定义)--> 表示“元”，“元”配置  ：表示基础的配置项目

第一种：UTF—8

<meta http-equiv="content-type" content="text/html;charset=utf-8">

第二种：gb2312

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

第三种：gb2312的简写 gbk

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

其中UTF-8全球通用，涵盖了人类的所有语言

Gb2312是国标，是中国的字库，涵盖了汉语和常见的英文

UTF-8中的一个汉字存储3个字节，而gb2312存储两个字节，一般情况下使用的是UTF-8.但是有时在用户体验上要考虑到是否使用国标

2.3关键字和页面描述

mata除了可以设置字符集，还可以设置关键字和页面描述

页面描述（description：描述）

设置页面描述，在百度搜索，可显示当前页面描述的内容，这个技术叫做SEO（SEO：英文Search Engine Optimization， 中文叫“搜索引擎优化”）

eg：<meta name = “名字 ” content =“图片加载失败后显示的提示内容”>

关键字：告诉搜索引擎，这个网页是做什么，提高搜索的效率，让人快速的找到想要的信息，keyword就是“关键字”

保存编码格式：File--> Save With Encoding

CM(Command) ＋ S保存   CM ＋ N新建文件(File--> New)    Tab点击出html的各种格式

HTTP协议：也叫超文本传输协议，个人的认识：用于Web浏览器和网站服务器之间的数据传输。它是以明文发送内容，不提供任何形式进行加密，攻击者很容易截取数据信息，可以直接看懂，所以它不适合传如卡号、密码等敏感信息

三、HTML的基本语法

<1、 html对换行（Tab键）、回车以及大小写都不敏感

    • <div>这是一个div的盒子！
    • <h3>这是一个三级标题</h3>
    • <p>这是一个段落</p>    </div>

等价于：

    • <div>这是一个div的盒子！
    • <h3>这是一个三级标题</h3>
    • <p>这是一个段落</p>
    • </div>

<div></div>存放内容或者嵌套其它标签使用，对换行不敏感

代码规范：<div>标签的嵌套的内容要依次缩进，增强代码的可读性

<2、html的空白折叠效果：html中的文字之间进行空格、换行、tab键都会折叠成一个空格

<3、标签要严格封闭(<>)

HTML、CSS实际上就是写代码，不是真正意义上"编程"，基本上不实现业务逻辑，但是思想和很多内容在编程上是相同的

四、标签的使用

HTML的标签分等级的，有二种类型：容器级、文本级

容器级的标签可以存放任何东西

文本级的标签只能放置文字、图片、表单元素

1、h标签

<h1></h1>一级标题(主标题) <h2></h2>二级标签…<h6></h6>六级标题

h1->h6定义标题语义，显示不同的标题大小    headline

p标签：<p></p>段落(Paragraph)  里面输入的是内容，p里面只能存放文字、图片、表单元素，其他一律不能放

eg：当源代码是

<p>

我是段落

<h1>我是主标题</h1>

</p>

但是在浏览器检查的时候显示的是

<p>

我是段落

</p>

<h1>我是主标题</h1>

<p> </p>

浏览器自己把P标签封闭，不让你去包裹h1

浏览器在p标签中遇到其它标签时，会自动添加</p>进行封闭，在另一个结束标签前面补上开始标签<p>，

3、 img标签

<img>插入图片    img(image：图片)     Src (Source: 资源)

eg:  <img src="" alt=“1.png”/>

能够插入的图片类型：jpg(jpeg)、gif、png、bmp，不能往网页里面插入的图片格式有：psd、ai

img的标签不需要反标签，是自封闭标签，也叫单标签

如：<img src="1.jpg"/>  ，Src是img的标签属性，1.png是属性值(网址或文件路径)

alt属性：alt(altemate : 替代) 图片无法显示的时候，用文字来代替文件（但是有些浏览器不支持）

HTML页面不是直接插入图片的，而是插入引用的地址，所以也要把图片上传到服务器上

如果一直显示不出图片，最直接有效的办法是输入全路径加图片名，但是只能在自己的电脑上能看到，不推荐这样用。

HTML中插入图片，有二个文件，一个html文件，一个jpg文件

我们关心就是当前这二个文件的相对位置，即是这个网站项目，那U盘拷贝给别人，只要相对路径不变，图片就一定能正常显示，图片和html文件要在同一层级上

如果在上一个文件里，要加“../”如果在上二个文件里，就添加“../../”，以此增加或者输入全路径

如果图片在html文件里面，则输入“thml/”

4、a标签超级链接

写法：<a href=""  title="这是什么样的title" targe="_blank"  >这是一个超链接</a>

一个网站，是由多个html网页组成，html网页键通过超级链接相互跳转，形成一个“网”

如：<a href="08.html" title="这是什么样的title">title属性</a>

target属性

target：目标的意思

如：<a href="08.html" title="这是title" target="_blank ">target属性</a>

blank（空白）：块状的意思，代表新建一个新的空白窗口

如果没有target="_blank "，那么在相同的标签页打开，如果写了target="_blank "，就是在新的空白标签页中打开，并且跳转的标签页还是存在的

5、页面中锚点

锚点：就是一个小小的标记，用来实现页面跳转，不容易被用户察觉

a （anchor）  是"锚"的意思  a标签

title    鼠标悬停时的文本显示

target(属性)    如果有这行代码，就会在新的空白标签页打开，并且在跳转的标签页中还是存在的

页面中的锚点作用：当前内容很多的时候，想直接返回首页，用来跳转页面

如：锚点可以用name和id来设置属性

<a name="BWHL">这是第一个锚点</a>

<a name="second">这是第二个锚点</a>

如何点击跳转（前提是有一个超级链接，指向页面中的锚点，才能在页面内跳转）

<a herf="#BEHL">点击第一个锚点</a>   #BEHL就是锚点

<a herf="#second">点击第二个锚点</a>

6、<br>换行标签

7、列表：

它会自动空格，分为：

有序列表：<ol><li>

无序列表：<ul><li>

可以在浏览器中检查代码：检查--> Console，有些浏览器可能不支持，常用的是Chrome和Firefix(有很多实用的插件，个人经常实用Firebug来检查元素)

HTML基础笔记-02的更多相关文章

  1. 黑马程序员_java基础笔记(02)...java语言基础组成

    ——————————  ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— java语法(1:关键字,2:标识符,3:注释,4:常量和变量,5:运算符,6:语 ...

  2. JavaScript基础第02天笔记

    JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...

  3. 《30天自制操作系统》笔记(02)——导入C语言

    <30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...

  4. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  5. OpenCV 学习笔记 02 使用opencv处理图像

    1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...

  6. ASP.NET Identity 2集成到MVC5项目--笔记02

    ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...

  7. Java：并发笔记-02

    Java:并发笔记-02 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 3. 共享模型之管程-1 本章内容-1 共享问题 synchronized 线程安全分 ...

  8. webug4.0 打靶笔记-02【完结】

    webug4.0打靶笔记-02 3. 延时注入(时间盲注) 3.1 访问靶场 3.2 寻找注入点 貌似一样的注入点: ?id=1' --+ 3.3 判断输出位置 同前两关一样的位置,时间盲注应该不是这 ...

  9. 软件测试之loadrunner学习笔记-02集合点

    loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...

随机推荐

  1. 64位系统 IIS中应用程序池设置导致 访问数据库错误

    64 位操作系统不支持Microsoft OLE DB Provider for Jet驱动程序,也不支持更早的Microsoft Access Driver (*.mdb)方式连接.导致程序里面的数 ...

  2. jquery操作dom

    1访问元素(属性,内容,值,css) 1元素属性(获取,设置,删除) .attr(name) .attr(key, value)  || .attr({key0:value0, key1:value1 ...

  3. OpenCv编程

    (1)用OpenCv加载.显示.保存图片: //加载图片 IplImage* m_img;//定义IplImage格式的图片头指针: m_img=cvLoadImage(m_imgLoc);//装载m ...

  4. Swift-ImageView响应点击事件

    随着Swift语言的不断更新迭代,纯Swift语言编写的代码更加紧凑简单,结合StoryBorad的使用,使开发苹果APP的门槛降低了不少.个人也是比较推荐使用Interface Builder去生成 ...

  5. 分享：根据webservice WSDL地址自动生成java调用代码及JAR包

    分享:根据webservice WSDL地址自动生成java调用代码及JAR包使用步骤:一.安装java 并配置JAVA_HOME 及 path二.安装ANT 并配置ANT_HOME三.解压WsdlT ...

  6. CodeIgniter2.2.0-在控制器里调用load失败报错的问题

    报错如下: hello A PHP Error was encountered Severity: Notice Message: Undefined property: Test::$load Fi ...

  7. WPF，Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...

  8. 去它的h5，我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  9. nim的引用和指针

    nim语言的引用和其他语言的指针有点相似 可以提供一种“多对一”的关系 这就意味着不同的引用可以指向同一个内存位置 nim区分可被追踪的引用和不可被追踪的引用 不可被追踪的引用又称为指针 可被追踪的引 ...

  10. Sublime Text 2—解决中文乱码

    Sublime Text 2是一个非常棒的代码及文本编辑器,绿色小巧.速度飞快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮.代码补全等,有着许多其他编辑器没 ...