1、实际开发中要用到的知识
2、面试中要用到的知识
html概述
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
html文档基本结构
一个html的基本结构如下:
第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。
html文档快速创建
新建一个html文档后,可以用快捷键的方式快速创建html文档。快捷键:!+tab键,或者 html:5+tab键
标签语法:
学习html语言就是学习标签的用法,html常用的标签有20多个,学会这些标签的使用,就基本上学会了HTML的使用。
标签的的使用方法:
块元素标签(行元素)和内联元素标签(行内元素)
标签在页面上会显示成一个方块。除了显示成方块,它们一般分为下面两类:
块元素:在布局中默认会独占一行,块元素后的元素需换行排列,块元素默认宽度等于父元素的宽度,即使设置了很小宽度,也占用一行。
内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开,内联元素之间默认会有小间距。
常用块元素标签
1、标题标签,表示文档的标题,除了具有块元素基本特性外,还含有默认的外边距和字体大小
2、段落标签,表示文档中的一个文字段落,除了具有块元素基本特性外,还含有默认的外边距
3、通用块容器标签,表示文档中一块内容,具有块元素基本特性,没有其他默认样式
常用内联元素标签
1、超链接标签,链接到另外一个网页,具有内联元素基本特性,默认文字蓝色,有下划线
2、通用内联容器标签,具有内联元素基本特性,没有其他默认样式
3、图片标签,在网页中插入图片,具有内联元素基本特性,但是它支持宽高设置。
其他常用功能标签
1、换行标签
2、html注释:
html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:
常用html字符实体
代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:
在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:
网页布局原理
标签在网页中会显示成一个个的方块,先按照行的方式,把网页划分成多个行,再到行里面划分列,也就是在表示行的标签中再嵌套标签来表示列,标签的嵌套产生叠加效果。
布局示例
根据网页布局的原理以及上面的实例,写出网页的html结构代码。
标签语义化
在布局中需要尽量使用带语义的标签,使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构,提高网站在搜索中的排名(也叫做SEO),其次是方便代码的阅读和维护。
带语义的标签
1、h1——h6:表示标题
2、p:表示段落
3、img:表示图片
4、a:表示链接
不带语义的标签
1、div:表示一块内容
2、span:表示行内的一块内容
所以我们要根据网页上显示的内容,使用适合的标签,可以优化之前的代码。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery