HTML基础笔记-02
---恢复内容开始---
学习网站: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的更多相关文章
- 黑马程序员_java基础笔记(02)...java语言基础组成
—————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— java语法(1:关键字,2:标识符,3:注释,4:常量和变量,5:运算符,6:语 ...
- JavaScript基础第02天笔记
JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...
- 《30天自制操作系统》笔记(02)——导入C语言
<30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- ASP.NET Identity 2集成到MVC5项目--笔记02
ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...
- Java:并发笔记-02
Java:并发笔记-02 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 3. 共享模型之管程-1 本章内容-1 共享问题 synchronized 线程安全分 ...
- webug4.0 打靶笔记-02【完结】
webug4.0打靶笔记-02 3. 延时注入(时间盲注) 3.1 访问靶场 3.2 寻找注入点 貌似一样的注入点: ?id=1' --+ 3.3 判断输出位置 同前两关一样的位置,时间盲注应该不是这 ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
随机推荐
- MATLAB-octave中向量场图的可视化
参考http://379910987.blog.163.com/blog/static/33523797201162223310546/ 设二维函数z=f(x,y),其中z为海拔,x为东西测向距离而y ...
- hdu 5543 Pick The Sticks(动态规划)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5543 题意:给你一根长为m的长木板和一些小木棒,每一根小木棒有它的长度和价值,这些小木棒要放在长木板上 ...
- p68 对数变换 关于fft2 fftshift 频谱
p68 频谱:绝大多数信号可分解若干不同频率的正弦波, 些正弦波中,频率最低的称为信号的基波,其余称为信号谐波,相当于该信号的基本频率.频率等于基频整数倍的正弦波分量称为谐波. 1.fft2 fft ...
- 【C-数组】
一.一维数组 ①.定义方式 类型说明符 数组名 [常量表达式]; 如:int array[10]; 注意: 1) 数组的类型实际上是指数组元素的类型.对于同一个数组,其所有元素的数据类型都是相同的. ...
- SCRUM报告(1)
我们组的PM是白杰,团队SCRUM 报告如下: 一.第一次spring会议内容: 1.确定所做项目的方向: 2.将调查问卷的结果进行统计,做了需求分析,大致了解了用户的想法: 3.确定了团队计划bac ...
- WordPress页面Page和文章Post的相互转换
1. 进入phpMyAdmin: 2. 进入WordPress对应的数据库: 3. 浏览wp_posts数据表: 4. 找到相应的 页面Page 并编辑(找到相应的 文章Post 并编辑): 5. 修 ...
- linux编译php的c扩展
第一步:安装php5 第二步:打开终端[为来方便,这里使用root用户],使用CD命令进入到php5源码包的ext目录 第三步:在终端键入以下命令 ./ext_skel --extname=extes ...
- mysql sql_safe_updates 不支持子查询的更新。
考虑到开发人员有时候不小心误更新数据,要求线上库的 MySQL 实例都设置 sql_safe_updates=1 来避免没有索引的 update.delete. 结果有一天开发发现下面的一个SQL 没 ...
- 用javascript写Android和iOS naitve应用,实在炫酷。
关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...
- 关于MySQL的在线扩容
原文地址:http://bucketli.iteye.com/blog/1294032 主要简单总结下,mysql在线扩容和缩容一般涉及到的内容,主要包括三个方面,1.在线也就意味着需要把增量的数据重 ...