HTML基础知识笔记教案.docx

Web前端HTML+CSS基础课程xiaoxiao2015/8/30HTML介绍1.2HTMl和CSS的关系1.HTML是网页内容的载体2.CSS样式是表现3.JavaScript是用来实现网页上的特效效果1.3认识html标签1.h1-h6是标题标签p/p是段落标签img/是图片标签1.4标签语法1.标签有英文括号和括起来2.一般标签是成对出现，开始标签+标签内容+结束标签3.标签与标签之间是可以嵌套的4.HTML标签不区分大小写，但大部分程序员都以小写为准1.5认识html文件基本结构1.html/html称为根标签，所有的网页标签都在html/html2.head标签用于定义文档的头部，它是头部元素的容器。头部标签有titlesrciptstylelinkmeta等3.在body和/body标签之间的内容是网页的主要内容内容标签有h1paimg1.6认识head标签1.文档的头部描述了文档的各种属性和信息，包括文档的标题等绝大多数文档包含的数据都不会真正作为内容显示给读者。1.7了解HTML的代码注释1.注释的作用: 帮助程序员标注代码的用途帮助程序回忆这段代码的用途帮助其他程序员很快的读懂你的程序的功能第二章认识标签（第一部分）2.1语义化，让你的网页更好的被搜索引擎理解语义化的好处1.更容易被搜索引擎收录2.更容易让屏幕阅读器读出网页内容2.2body标签，网页上显示的内容放在这里1.网页所有的内容放在body标签里2.3开始学习p标签，添加段落1.如果想在网页上显示文章，这时就需要p标签2.4了解hx标签，为你的网页添加标题1.h1-h6为六级标题,从h1-h6重要性递减,h1是最高的标题2.例如腾讯网，“腾讯网”为h1标签，“要闻”和“今日要闻”为h2标签2.5加入强调语气，使用strong和em标签1.em表示用斜体表示2.strong用粗体表示，目前国内前端程序员更喜欢使用strong表示强调。2.6使用span标签为文字设置单独样式1.em和strong标签是为了强调一段话中的关键字时使用，它们的语义是强调。2.span标签是没有语义的，它的作用就是为了设置单独的样式用的。2.7q标签，短文本引用1.语法q引用文本/q，一般引用一句诗句或名人名言较短的文本。2.注意要引用的文本不用加双引号，浏览器会对引用标签自动添加双引号。2.8blockquote标签，长文本引用1.语法blockquote引用文本/blockquote，一般引用整首诗句或名人名言较长的文本。2.浏览器对blockquote标签的解析是缩进样式。3.注意要引用的文本不用加双引号，浏览器会对引用标签自动添加双引号。2.9使用br标签分行显示文本1.在需要换行的文本后面加上br/,进行换行。2.br/标签是空标签，没有内容的标签就是空标签空标签还有：hr/、img/2.10为你的网页中添加一些空格1.当文字需要一些距离，但又不是太远，这是就用nbsp;2.nbsp;代表一个空格，在html代码中输入空格键是不起作用的。2.11认识hr标签，添加水平横线1.hr/标签的在浏览器中的默认样式线条比较粗，颜色为灰色。2.12address标签，为网页加入地址信息1.一般用于网站地址、联系地址、电子邮件地址、签名或文档的作者身份。2.浏览器默认样式为斜体。2.13想加入一行代码吗？使用code标签1.语法code代码语言/code，其中“代码语言”为一行代码2.如果是多行代码，可以使用pre标签3.代码语言：例如var i=i+300;问题小结1.空标签的/是在标签字母的后面，例如hr/、img/br/2.内容标签的/是在标签字母的前面/code/span/div2.14使用pre标签为你的网页加入大段代码1.pre代码语言段/pre2.pre标签的主要作用：预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。第三章认识标签（第二部分）3.1使用ul，添加新闻信息列表1.ul一般用于新闻列表、图片列表（无序排列）2.语法ul li信息/li li信息/li /ul3.2使用ol，添加图书销售排行榜1.语法ol li信息/li li图片/li /ol2.每列内容前面都有序号（有序排列）例如1.信息2.图片3.3认识div在排版中的作用1.在网页制作过程中，可以把一些独立的逻辑部分划分出来放在一个div标签中，这个div标签的作用就相当于一个容器。3.4给div命名，使逻辑更加清晰1.用id属性来为div提供唯一的名称3.5table标签，认识网页上的表格1.table.../table:整个表格以table标记开始、/table标记结束。2.tabletbody.../tbody/table：当表格内容非常多时