黑马程序员技术交流社区

标题: 初识HTML [打印本页]
作者: 可能前端适合我    时间: 2019-7-25 13:15
标题: 初识HTML
关于HTML+CSS初识
HTML是用来描述网页的一种语言,翻译过来就是一种超文本标记语言，它不是一种编程语言，而是用各种各样的标签来描述网页。HTML是万维网联盟简称W3C制定的一套标准。
因为存在不同的浏览器，就会有不同的浏览器内核，为了适应不同浏览器的内核，W3C就制订WEB标准来让浏览器的显示一样，这样就统一了WEB的编写模式。
Web前端标准的组成部分包括机构标准（html）、表现标准（CSS）和行为标准（javascript）,HTML是不足以让整个页面完整好看的排列，就有了css样式的出现，有了css的帮助整个页面就像是赤身裸体的人有了衣服和饰品，再配上javascript
下面我们爱初步了解一下HTML:
01、网页的组成：
文字、图片和超链接等元素构成，还包括了音频、视频等等；
02、常见的浏览器：
浏览器是显示。运行网页的平台；
IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器
03、浏览器内核的作用：
读取网页内容；
04、常见的浏览器内核：
IE（Trident）        
Firefox（Gecko）         
safari（webkiit）           
chrome（chromium/Blink）           
Opera（blink）
05、移动端常见浏览器内核：
一般都用Webkit内核
06、为什么要遵循web标准？
由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致
07、web标准的组成部分（重点）
结构标准（HTML）
表现标准（CSS样式）
行为标准（javascript）
08、关于HTML的概念
•       1、HTML是超文本标记语言，不是编程语言；
•       2、用HTML标签来描述网页元素，比如：链接、图片、文字等；
•       3、我们需要将所有的标签放在尖括号“<>” 里面
09、html的基本结构（会默写）
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png                   标题                          网页主体内容      " v:shapes="矩形_x0020_1">html的结构(在书写代码的时候要注意所有的标签都要用小写不能用大小)
head 标签里面的内容是给浏览器解析的，用户只能看到title标题；
body 标签里面的内容是给用户看的；
10、HTML标签分类
双标签：由开始标签<开始标签>和结束标签</结束标签>组成；
例如：<html></html>   <body></body>  <head></head>  
单标签:  不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br />   <hr />
11、HTML标签关系
嵌套关系  --- 父子级关系
并列关系  --- 兄弟关系
12、Sublime的使用技巧（重要）
新建文档   Ctrl+N          保存   Ctrl+S   保存文件名必须为.html；
放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小；
生成页面骨架：01 – html:5 按下tab键       02 ！按tab键（！必须是英文状态下输入）；
浏览页面效果：右键在浏览器中打开；
13、html结构介绍
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png                Document        " v:shapes="矩形_x0020_2">

<!DOCTYPE html>
让浏览器用H5的标准来解析代码
语言：lang="en"
当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文
字符集：<meta charset="UTF-8">
用来对我们书写的字符进行对应国家文字的编译
常用的字符编码：
Gb2312 简体中文    BIG5 繁体中文    GBK 全部中文（包括简体和繁体中文）
UTF-8  全世界所有国家需要用到的字符
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg
14、标签的语义化的目的
语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎
15、标题标签（记住）
标题标签分为6个级别，分别是h1/h2/h3/h4/h5/h6作为标题使用，并且依据重要性递减；
<h1></h1>
       <h2></h2>
       <h3></h3>
       <h4></h4>
       <h5></h5>
       <h6></h6>
注意：
01、标题标签默认加粗，独自占一行，双标签；
02、h1标签一般情况下一个页面最好出现一次，并且放logo最好，h2标签一个页面最多使用两次，h3-h6标签可以多次重复出现；
16、关于浏览器对空格和回车换行的解析（理解）
浏览器在解析代码的时候，只会解析一个空格不管输入多少个空格，对于回车换行直接是不解析或者解析成一个空格，所以我们在书写换行效果的时候书写换行用<br />，空格用&nbsp;书写即可；
17、段落标签p（记住）
段落标签p，双标签，可以清楚得到划分页面的段落；
18、水平线标签 hr
水平线标签hr,单标签 --- <hr />
19、div和span标签
div标签布局标签，主要是布局用的大标签也是主要标签;
特点：没有语义，独占一行；
span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；
特点：没有语义，一行共存多个；
20、文本格式化标签（记住）
加粗标签：        <b>单纯的加粗</b>     <strong>语义化强调</strong>
倾斜标签：        <i>单纯的加粗</i>        <em>语义化强调</em>  
删除线标签：      <s>单纯的加粗</s>      <del>语义化强调</del>
下划线标签：      <u>单纯的加粗</u>      <ins>语义化强调</ins>
21、html标签的属性如何书写，书写的时候要注意什么？
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：<标签名 属性1=“属性值1”  属性2=“属性值2” …> 内容 </标签名>；
注意：在书写标签属性的时候每一个属性之间要用空格隔开；
22、图片标签img
img标签,单标签，<img />,必须配合src属性将图片引入html页面，<img src=“图片路径” />
<imgsrc="03.jpeg">
23、图片的常见属性
src        属性值 --- url      图像路径
       alt       属性值 --- 自定义文本   图像不能正常显示的时候替换文本；
       title      属性值 --- 自定义文本    鼠标移入图片显示提示文本；
       width    属性值 --- 自定义数值   设置图片的宽度；
       height   属性值 --- 自定义数值   设置图片的高度；
       border   属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg
注意：01、我们在给图片设置宽高的时候只能设置一个，让另外的一个自适应；alt是在图片路径错误或者找不到图片的是提示用户这里是什么内容；
02、设置图片宽高的时候不要写单位px
24、超链接a（记住）作用
实现页面之间的相互跳转
详解
a标签，双标签
<ahref=”链接路径”></a>
常用属性（非常重要）：
href用于指定链接目标的url路径地址，必不可少的；
target用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image008.jpg
href的取值：一般是放呀跳转的目标路径，如果我们不知道要跳到什么地方，就直接书写一个#表示空链接；
超链接的链接方式：
外部链接（在线链接）：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接：  直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；
空链接：    如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；
25、代码注释
html注释：<!-- 注释内容 -->
css注释：/* 注释内容 */
快捷键：Ctrl+？
添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的
26、关于路径
路径分为两类：相对路径、绝对路径，在实际工作中我们绝对不能使用绝对路径，一般都用相对路径；
查找路径的思路 --- 就是从文件自身出发，去找目标文件
相对路径同级（平级）路径
文件（html文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,例如：laowang.jpg；
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image009.png
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image011.jpg
下级路径
文件（html文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称，例如：img/laowang.jpg
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image013.jpg
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image015.jpg
上级路径
存放文件（html文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image017.jpg
file:///C:/Users/dell/AppData/Local/Temp/msohtmlclip1/01/clip_image019.jpg
记忆口诀：
              同级路径：文件和目标文件是同一个父级，平级关系；
              下级路径：从文件出发往里面查找；
              上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；
绝对路径：
以web站点根目录为参考基础的目录路径，其实一般分为两种情况：
01、带有盘符的路径，坚决不能使用，
例如：“D:\web/logo.gif”;
02、完整的网络地址，可以使用只要网络资源一直存在，
例如： http://www.itcast.cn
注意:如果要使用完成的网络地址必须书写http://
27、目录文件夹：
用一个文件夹将一个项目的所有资源整合到一起，一般包含了存放图片的文件，存放css的文件夹，存放js的文件夹、存放图标文字的文件夹以及html文档等；





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2