秦皇岛网站制作专家教您简单建站,网站上的公告怎么做参考文献,网络公司经营范围可以加技术培训,网站开发流程分析1.1 html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写#xff0c;意思是超文本标记语言#xff0c;超文本指的是超链接#xff0c;标记指的是标签#xff0c;是一种用来制作网页的语言#xff0c;这种语言由一个个的标签组成#xff0c;用…
1.1 html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言超文本指的是超链接标记指的是标签是一种用来制作网页的语言这种语言由一个个的标签组成用这种语言制作的文件保存的是一个文本文件文件的扩展名为html或者htm一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用文本的方式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件渲染成网页显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下 1 !DOCTYPE html2 html langen3 head 4 meta charsetUTF-85 title网页标题/title6 /head7 body8 网页显示内容9 /body
10 /html 第一行是文档声明第二行“html”标签和最后一行“/html”定义html文档的整体“html”标签中的‘lang“en”’定义网页的语言为英文定义成中文是langzh-CN,不定义也没什么影响它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素“head”标签里面负责对网页进行一些设置以及定义标题设置包括定义网页的编码格式外链css样式文件和javascript文件等设置的内容不会显示在网页上标题的内容会显示在标题栏“body”内编写网页上显示的内容。
html文档规范
xhtml制定了文档的编写规范html5可部分遵守也可全部遵守看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html注释
html文档代码中可以插入注释注释是对代码的说明和解释注释的内容不会显示在页面上html代码中插入注释的方法是 1 !-- 这是一段注释 --
1.2 html标题
通过 h1、h2、h3、h4、h5、h6,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系比如说 h1用作主标题最重要的其后是 h2次重要的再其次是 h3以此类推。搜索引擎会使用标题将网页的结构和内容编制索引所以网页上使用标题是很重要的。 1 h1这是一级标题/h1
2 h2这是二级标题/h2
3 h3这是三级标题/h3 1.3 html段落、换行与字符实体
html段落
p标签定义一个文本段落一个段落含有默认的上下间距段落之间会用这种默认间距隔开代码如下 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title段落/title6 /head7 body8 pHTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言超9 文本指的是超链接标记指的是标签是一种用来制作网页的语言这种语言由一个个的
10 标签组成用这种语言制作的文件保存的是一个文本文件文件的扩展名为html或者htm。
11 /p
12
13 p一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用文本的方
14 式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件渲染成网页显示的网
15 页可以从一个网页链接跳转到另外一个网页。/p
16 /body
17 /html html换行
代码中成段的文字直接在代码中回车换行在渲染成网页时候不认这种换行如果真想换行可以在代码的段落中插入br /来强制换行代码如下 1 p
2 一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用br /
3 文本的方式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件br /
4 渲染成网页显示的网页可以从一个网页链接跳转到另外一个网页。
5 /p html字符实体
代码中成段的文字如果文字间想空多个空格在代码中空多个空格在渲染成网页时只会显示一个空格如果想显示多个空格可以使用空格的字符实体,代码如下 1 !-- 在段落前想缩进两个文字的空格使用空格的字符实体nbsp; --
2 p
3 nbsp;nbsp;一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用br /
4 文本的方式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件br /
5 渲染成网页显示的网页可以从一个网页链接跳转到另外一个网页。/p 在网页上显示 “” 和 “” 会误认为是标签想在网页上显示“”和“”可以使用它们的字符实体比如 1 !-- “” 和 “” 的字符实体为 lt; 和 gt; --
2 p
3 3 lt; 5 br
4 10 gt; 5
5 /p 1.4 html块、含样式的标签
html块
1、div标签 块元素表示一块内容没有具体的语义。2、span标签 行内元素表示一行中的一小段内容没有具体的语义。
含样式和语义的标签
1、em标签 行内元素表示语气中的强调词2、i标签 行内元素原本没有语义w3c强加了语义表示专业词汇3、b标签 行内元素原本没有语义w3c强加了语义表示文档中的关键字或者产品名4、strong标签 行内元素表示非常重要的内容
语义化的标签
语义化的标签就是在布局的时候多使用语义化的标签搜索引擎在爬网的时候能认识这些标签理解文档的结构方便网站的收录。比如h1标签是表示标题p标签是表示段落ul、li标签是表示列表a标签表示链接dl、dt、dd表示定义列表等语义化的标签不多。
1.5 html图像、绝对路径和相对路径
html图像
img标签可以在网页上插入一张图片它是独立使用的标签通过“src”属性定义图片的地址通过“alt”属性定义图片加载失败时显示的文字以及对搜索引擎和盲人读屏软件的支持。 1 img srcimages/pic.jpg alt产品图片 /
绝对路径和相对路径
像网页上插入图片这种外部文件需要定义文件的引用地址引用外部文件还包括引用外部样式表javascript等等引用地址分为绝对地址和相对地址。
绝对地址相对于磁盘的位置去定位文件的地址相对地址相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件相对路径就没有这个问题。相对路径的定义技巧 “ ./ ” 表示当前文件所在目录下比如“./pic.jpg” 表示当前目录下的pic.jpg的图片这个使用时可以省略。 “ ../ ” 表示当前文件所在目录下的上一级目录比如“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。 本文转载于:猿2048⇒https://www.mk2048.com/blog/blog.php?idhh1c2ihjtitle前端开发之基础知识-HTML一
