企业网站建设时优化关键词的问题,郴州 网站建设,做网站用什么插件,电脑行业网站模板目录
HTML概述
HTML结构
HTML标签语法
基本标签
标题标签
换行标签
段落标签
文本格式化标签
特殊符号
div和span标签
超链接标签
锚点
img标签
列表标签
表格标签
表单标签 HTML概述 HTML#xff0c;即超文本标记语言#xff08;HyperText Markup Language …目录
HTML概述
HTML结构
HTML标签语法
基本标签
标题标签
换行标签
段落标签
文本格式化标签
特殊符号
div和span标签
超链接标签
锚点
img标签
列表标签
表格标签
表单标签 HTML概述 HTML即超文本标记语言HyperText Markup Language ]由SGML (标准通用标记语言) 发展而来也叫web页面。扩展名是 .html 或是 .htm 。 HTML是一种用来制作网页的标准标记语言。超文本指的就是超出普通文本范畴的文档可以包含文本、图片、视频、音频、链接等元素。 HTML 不是一种编程语言而是一种写给网页浏览器、具有描述性的标记语言。
自1990年以来HTML就一直被用作WWWWorld Wide Web的缩写也可简写WEB中文叫做万维网的信息表示语言使用HTML语言描述的文件需要通过网页浏览器显示出效果。用户在访问网页时是把服务器的HTML文档下载 到本地客户设备中然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。
网页本身是一种文本文件通过在文本文件中添加各种各样的标记标签可以告诉浏览器如何显示标记中的代表的内容如HTML中有的标签可以告诉浏览器要把字体放大就像word一样也有的标签可以告诉浏览器显示指定的图片还有的标签可以告诉浏览器把内容居中或者倾斜等等。
每一个HTML标签代表的意义都不一样。同样他们在浏览器中表现出来的外观也是不一样的。 HTML结构
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body/body
/html1、!DOCTYPE html 告诉浏览器使用什么样的html或者xhtml来解析html文档
2、html/html是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档在它们之间是文档的头部head和主体body。
3、head/head元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示但是其间的元素有特殊重要的意义。
4、title/title定义网页标题在浏览器标题栏显示。
5、meta charsetUTF-8 声明编码方式用utf8
6、body/body之间的文本是可见的网页主体内容 HTML标签语法
标签名 属性1“属性值1” 属性2“属性值2”……内容部分/标签名
标签名 属性1“属性值1” 属性2“属性值2”…… /
1、HTML标签是由尖括号包围的特定关键词
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如head就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套 基本标签
标题标签
h1标题1/h1
h2标题2/h2
h3标题3/h3
h4标题4/h4
h5标题5/h5
h6标题6/h6
换行标签
悟道休言天命br
修行勿取真经。br
一悲一喜一枯荣br
哪个前生注定
段落标签
p菩提本无树/p
p明镜亦非台。/p
p本来无一物/p
p何处惹尘埃。/p
文本格式化标签
HTML提供了一系列的用于格式化文本的标签可以让我们输出不同外观的元素比如粗体和斜体字。如果需要在网页中需要让某些文本内容展示的效果丰富点可以使用以下的标签来进行格式化。
b定义粗体文本/bbr /
strong定义粗体文本方式2/strongbr /
em定义斜体字/embr /
i定义斜体字方式2/ibr /
del定义删除文本/delbr /
特殊符号
reg; nbsp; copy;
reg; 表示注册商标符号Registered Trademark Symbol它用于标识已注册的商标。它通常用于产品、服务或其他商业实体的商标标识。
nbsp; 表示空格符号Non-Breaking Space它用于在HTML和XML等标记语言中插入一个空格但该空格不会被浏览器或解析器忽略而是被保留并显示。
copy; 表示版权符号Copyright Symbol它用于表示作品的版权所有者。它通常用于文本、音乐、影片等创作作品的版权声明。
div和span标签
div只是一个块级元素并无实际的意义。主要通过CSS样式为其赋予不同的表现.
span表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
块级元素与行内元素的区别所谓块元素是以另起一行开始渲染的元素行内元素则不需另起一行。如果单独在网页中插入这两个元素不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。 超链接标签
超链接是浏览者和服务器的交互的主要手段也叫超级链接或a链接是网页中指向一个目标的连接关系这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的用户通过点击超链接可以从一个网页跳转到另一个网页。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时遇到一个不认识的英文你只要在这个单词上单击一下即可跳转到它的翻译页面中看完单词的解释后点一下返回按钮又可继续阅读这就是超链接的常见用途。还有经常到购物网站中去我们都是在百度搜索然后点击对应的搜索项进入到对应的购物网站的这也是超链接的作用。超链接的属性
属性值描述href网络链接 [ 例如: 百度一下你就知道 ] 本地链接 [ 例如F:\html\index.html ]规定链接的跳转目标title百度链接的提示信息target_blank [ 在新建窗口中打开网页 ] _self [ 默认值覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页]与前面四项固定值不同framename是泛指并不是这个值这点将在后面框架部分内容中详细介绍这里可以暂时先略过
1、href是超链接最重要的属性规定了用户点击链接以后的跳转目标这个目标可以是 网络连接也可以是本地连接。
2、网络链接指的是依靠网络来进行关联的地址一般在地址前面是以 http://或者https://这样开头的如果没有网络则用户点击了超链接也无法访问对应的目标。
3、本地链接跳转指的是本地计算机的地址一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的不需要经过网络。
4、如果href的值留空则默认是跳转到当前页面也就是刷新当前页面。 锚点
锚点( anchor )是超链接的一种应用也叫命名锚记锚点可以像一个定位器一样可以实现页面内的链接跳转运用相当普遍。例如我们有一个网页由于内容太多导致页面很长而且里面的内容可以分为N个部分。这样的话我们就可以在网页的顶部设置一些锚点这样便可以方便浏览者点击相应的锚点到达本页内相应的位置而不必在一个很长的网页里自行寻找。又例如我们页面中有个链接需要跳转到另一个页面的中间或者脚部去这时候也可以运用上锚点技术来解决这个问题。
!DOCTYPE HTML
html langen-USheadtitle锚点的使用/title/headbodya href#i1第一章/aa href#i2第二章/aa href#i3第三章/adiv idi1p第一章内容/p/divdiv idi2p第二章内容/p/divdiv idi3p 第三章内容/p/div/body
/html img标签
在HTML中图像由img标签定义的它可以用来加载图片到html网页中显示。网页开发过程中有三种图片格式被广泛应用到web里分别是 jpg、png、gif。
img标签的属性
/*
src属性指定图像的URL地址是英文source的简写表示引入资源。src的值可以是本地计算机存储的图片的地址也可以是网络上外部网站的图片的地址。如果src的值不正确那么浏览器就无法正确的图片而是显示一张裂图。alt属性指定图像无法显示时的替换文本。当图像显示错误时在图像位置上显示alt的值。如上所示就是谷歌浏览器中引入图像失败后显示了替换文本。alt属性一般 作为SEO优化的手段之一所以使用了img标签就需要加上alt属性。
width属性 指定引入图片的显示宽度。
height属性指定引入图片的显示高度。
border属性指定引入图片的边框宽度默认为0。
title属性悬浮图片上的提示文字
*/
点击图片跳转可以配合a标签使用
aimg src alt/a 列表标签 ul typesquareliitem1/liliitem2/liliitem3/li/ulol start100liitem1/liliitem2/liliitem3/li/ol 表格标签
在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样都是有行有列的。HTML使用tr标签定义行使用td标签定义列。
语法
table border1trtd单元格的内容/td……/tr……
/table
1、table和/table表示一个表格的开始和结束。一组table.../table表示一个表格。
2、border用于设置整个表格的边框宽度默认为0表示不显示边框。
3、tr和/tr表示表格中的一行的开始和结束。一组tr.../tr一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
4、td和/td表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列多少的单元格了。 table属性
属性值描述widthpx、%规定表格的宽度。heightpx、%规定表格的高度。alignleft、center、right规定表格相对周围元素的对齐方式。bgcolorrgb(x,x,x)、#xxxxxx、colorname规定表格的背景颜色。backgroundurl规定表格的背景图片。borderpx规定表格边框的宽度。cellpaddingpx、%规定单元格边框与其内容之间的空白。cellspacingpx、%规定单元格之间的空隙。 td属性
表格中除了行元素以外还有单元格单元格的属性和行的属性类似。td和th都是单元格。
属性值描述heightpx、%规定单元格的高度。widthpx、%规定单元格的宽度。alignleft、center、right规定单元格内容的对齐方式。valigntop、middle、bottom规定单元格内容的垂直对齐方式。bgcolorrgb(x,x,x)、#xxxxxx、colorname规定单元格的背景颜色。backgroundurl规定单元格的背景图片。rowspannumber规定单元格合并的行数colspannumber规定单元格合并的列数 表单标签
表单主要是用来收集客户端提供的相关信息提供了用户数据录入的方式有多选、单选、单行文本、下拉列表等输入框便于网站管理员收集用户的数据是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
表单被form标签包含内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后就可以把表单数据提交到服务器端。
一个表单元素有三个基本组成部分 表单标签包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。 表单按钮包括提交按钮、复位按钮和一般按钮用于将数据传送到服务器上的CGI脚本或者取消输入还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性
属性值描述action访问服务器地址服务器端表单处理程序的URL地址methodpost、get[默认值]表单数据的提交方法target参考超链接的target属性表单数据提交时URL的打开方式enctypeapplication/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]表单提交数据时的编码方式 h3用户注册/h3form actionhttp://127.0.0.1:8800 methodgetplabel foruser姓名/label input typetext nameuser iduser/pp密码 input typepassword namepwd/pp爱好input typecheckbox namehobby valuebasketball篮球input typecheckbox namehobby valuefootball足球input typecheckbox namehobby valueshuangseqiu checked双色球/pp性别input typeradio namegender valuemen男input typeradio namegender valuefemale女input typeradio namegender valueqita其他/pp生日input typedate namebirth/pp籍贯select nameprovince id multiple size2option value广东省/optionoption value selected山东省/optionoption value河北省/option/select/pptextarea name id cols30 rows10 placeholder个人简介/textarea/pdivpinput typereset value重置/ppinput typebutton value普通按钮/ppbutton普通按钮/button/ppinput typesubmit value提交/p/div/form
