|
关于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 />，空格用 书写即可； 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、图片标签imgimg标签,单标签，<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文档等；
| 
收藏
淘帖
踩
