摘要:标签行内元素,表示一行中的一小段内容,没有具体的语义。表示当前文件所在目录下的上一级目录,比如表示当前目录下的上一级目录下的文件夹中的的图片。标签表示列表的整体。
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
一个html的基本结构如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题title>
head>
<body>
网页显示内容
body>
html>
第一行是文档声明,第二行“”标签和最后一行“”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是lang="zh-CN",不定义也没什么影响,它一般作为分析统计用。 “
”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“”内编写网页上显示的内容。目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法: html:xt + tab
文档示例:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 title>
head>
<body>
body>
html>
pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的
此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab
文档示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 title>
head>
<body>
body>
html>
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:
html的标签大部分是成对出现的,少量是单个出现的,特定标签之间可以相互嵌套,嵌套就是指一个标签里面可以包含一个或多个其他的标签,包含的标签和父标签可以是同类型的,也可以是不同类型的:
<body>......body> <p>......p> <div>......div> <b>......b> <br /> <img src="..." /> <input type="..." /> <p> <span>...span> <a href="...">...a> p> <div> <h3>...h3> <div> <span>...span> <p>...p> div> div>
通过
<h1>这是一级标题h1> <h2>这是二级标题h2> <h3>这是三级标题h3>
标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落title>
head>
<body>
<p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
p>
<p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
页可以从一个网页链接跳转到另外一个网页。p>
body>
html>
代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入
来强制换行,代码如下:
<p> 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br /> 文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br /> 渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。 p>
代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:
<p> 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br /> 文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br /> 渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。p>
在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:
<p> 3 < 5 <br> 10 > 5 p>
1、div标签 块元素,表示一块内容,没有具体的语义。
2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。
1、em标签 行内元素,表示语气中的强调词
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
4、strong标签 行内元素,表示非常重要的内容
语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。
标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。
<img src="images/pic.jpg" alt="产品图片" />
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
<a href="#">a> <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客a> <a href="2.html">测试页面2a>
页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。
<a href="#mao1">标题一a> ...... ...... <h3 id="mao1">跳转到的标题h3>
在网页上定义一个有编号的内容列表可以用
<ol> <li>列表文字一li> <li>列表文字二li> <li>列表文字三li> ol>
在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。
在网页上定义一个无编号的内容列表可以用
<ul> <li>列表文字一li> <li>列表文字二li> <li>列表文字三li> ul>
在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表通常用于术语的定义。
<h3>前端三大块h3> <dl> <dt>htmldt> <dd>负责页面的结构dd> <dt>cssdt> <dd>负责页面的表现dd> <dt>javascriptdt> <dd>负责页面的行为dd> dl>
1、table标签:声明一个表格
2、tr标签:定义表格中的一行
3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:
1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
border-collapse:collapse 设置边框合并,制作一像素宽的边线的表格
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1902.html
摘要:和是最受欢迎的。虚拟环境将允许将项目依赖项与本地机器依赖项隔离开来。文件将是项目中的主文件。运行后,检查本地主机。在中创建一个名为的文件夹,并创建一个名为的文件夹。部署创建帐户为前端和全栈应用程序提供免费部署服务。 ...
摘要:权重权重权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用权重相同的,后写的样式会覆盖前面写的样式。标签支持格式属性可选第三方播放器CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级,按照等级来计算权重 1、!impo...
摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...
阅读 712·2023-04-25 19:43
阅读 3906·2021-11-30 14:52
阅读 3783·2021-11-30 14:52
阅读 3851·2021-11-29 11:00
阅读 3782·2021-11-29 11:00
阅读 3868·2021-11-29 11:00
阅读 3556·2021-11-29 11:00
阅读 6102·2021-11-29 11:00