东莞h5网站制作,自定义建设网站,网站规划与开发技术,哈尔滨网站定制公司基本介绍 官网文档地址: HTML 教程 HTML#xff08;HyperText Mark-up Language#xff09;即超文本标签语言#xff1b;HTML 文本是由 HTML 标签组成的文本#xff0c;可以包括文字、图形、动画、声音、表格、链接等#xff1b;HTML 的结构包括头部#xff08;HeadHyperText Mark-up Language即超文本标签语言HTML 文本是由 HTML 标签组成的文本可以包括文字、图形、动画、声音、表格、链接等HTML 的结构包括头部Head、主体Body两大部分。 头部描述浏览器所需的信息 主体则包含所要说明的具体内容。
注意HTML 文件不需要编译直接由浏览器进行解析执行 网页的结构图 html 基本结构 说明 HTML 标签
用两个尖括号””括起来一般是双标签 如b和/b 前一个标签是起始标签, 后一个标签为结束标签两个标签之间的文本是html 元素的内容 某些标签称为单标签,因为它只需单独使用就能完整地表达意思 br/ 表示换行 hr/表示线条 HTML 元素指的是从开始标签到结束标签的所有代码 html命名规范 xx.yy.html xx-yy.html xx_yy.html 根据公司规范要求即可 !--文档类型说明 注释 --
!DOCTYPE html!--将英语指定为语言将美国指定为国家--
!--html langen-US--!--中文指定为语言将中国指定为国家--
html langzh-CN!--html头--
head!--charset文件的字符集--meta charsetUTF-8!--文件标题--titleJava教育/title
/head!--body体主体部分--
body
!--内容 --
hello,Java教育
/body/html
!DOCTYPE html
html langen
headmeta charsetUTF-8title标签使用细节/title
/head
body!--标签不能交叉嵌套--
!--divspantom/div/span 错误用法--
divspantom/span/div!--标签必须正确关闭--
spanjack/span!--注释不能嵌套 --
!--html 语法不严谨。有时候标签不闭合属性值不带””也不报错--font colorred张飞/font
font colorblue关羽/font
br/
/body
/html HTML 标签/元素
1、font字体标签
它可以用来修改文本的字体,颜色,大小(尺寸)。
语法 font size40px face微软雅黑 colorred北京/font
属性 color 属性修改颜色 face 属性修改字体 size 属性修改文本大小
注意对应标签的属性顺序不做要求 2、字符实体
在网页上显示一些特殊的符号 称为字符实体(也叫符号实体)。
HTML ISO-8859-1 参考手册HTML 符号实体参考手册
显示结果描述实体名称实体编号 空格nbsp;#160;小于号lt;#60;大于号gt;#62;和号amp;#38;引号quot;#34;’撇号apos; (IE不支持)#39;分cent;#162;£镑pound;#163;¥人民币/日元yen;#165;€欧元euro;#8364;§小节sect;#167;©版权copy;#169;®注册商标reg;#174;™商标trade;#8482;×乘号times;#215;÷除号divide;#247;
body
!--浏览器会将 hr/解析成一条线--
jack
hr/lt;hr/gt;
smith smith2 hspbr/
smith smith2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;hsp/body 3、标题标签
标题使用 h1 - h6 标签进行定义 h1 定义最大的标题h6 定义最小的标题。
语法 h1标签1/h1
body!-- 标题标签
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
--h1标签1/h1
h2标签2/h2
h3 aligncenter标签3/h3
h4标签4/h4
h5标签5/h5
h6 alignright标签6/h6/body 4、超链接
超链接是指从一个网页指向一个目标的链接关系
目标另一个网页相同网页上的不同位置一个图片一个电子邮件地址一个文件一个应用程序等等。
语法 a hrefhttp://www.sohu.com target_blank搜狐2/a
属性 a 标签是超链接 href 属性设置连接的地址 target 属性设置哪个目标进行跳转 _self : 表示当前页面(默认值) _blank : 表示打开新页面来进行跳转
body!--
点击超链接打开邮件
--a hrefhttp://www.sohu.com搜狐/abr/
a hrefhttp://www.sohu.com target_blank搜狐2/abr/
a hrefmailto:tomsohu.com联系管理员/a
/body 5、列表
无序列表 ul/li 有序列表 ol/li bodyh1五虎将/h1ol typeI start3lijack/lilitom/lilismith/lilimary/lilimilan/li
/ol/body 6、图像标签
可以在 html 页面上显示图片。
语法 img src./imgs/1.png height150 border10px alt美女找不到
属性 img: 标签是图片标签,用来显示图片 src: 属性可以设置图片的路径 width: 属性设置图片的宽度 height: 属性设置图片的高度 border: 属性设置图片边框大小 alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容
boby
h1图片标签的演示/h1!-- ./imgs/1.png 表示当前路径下的 imgs文件夹下的 1.png--!-- 在进行图片缩放时建议指定 width 或者 height 即可浏览器会按照比例显示--img src./imgs/1.png height150 width400 br/img src./imgs/1.png height150 border10pxbr/img src./imgs/2.png alt美女找不到br//body 7、表格标签
基本语法 table width500 border6 aligncenter tr th名字/th th住址/th th邮件/th /tr tr td第1行第1列/td td第1行第2列/td td第1行第3列/td /tr /table 跨行跨列 合并列: colspan列数 合并行: rowspan行数 bordercolor: 指定表格边框的颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格(跨行跨列)/title
/head
body!--
思路:1. 先把整个表格的完整的行和列展示出来5*32. 在使用合并的技术来处理3. 如果是16进制的颜色前面#4. 屏幕取色器FastStore Capture 应用程序
--table border1 height250 bordercolor#E87EFA cellspacing0 width500tr!--合并了3列--td aligncenter colspan3第1行第1列/td/trtr!-- 合并行跨行 row行--td rowspan2第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/trtr!--合并行跨行 row行--td rowspan2第4行第1列/tdtd第4行第2列/tdtd第4行第3列/td/trtrtd第5行第2列img srcimgs/2.png width100/tdtd第5行第3列/td/tr/table
/body
/html7、表单标签
语法格式 1. form 表示表单
2. action 表示提交到哪个页面 表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)
3. method 表示提交方式 1常用提交方式 --get 默认方式 请求不安全的而且数据是有长度限制的, 建议有重要信息不要使用Get 浏览器地址栏中的地址是action 属性[?请求参数] 请求参数的格式http://localhost:63342/html/ok.html?usernamejackpwd1111pwd211sportlqsportsqgendermalecitybj 2常用提交方式 --getpost 请求数据是和http传输的在http体中相对安全 传输的数据长度理论上没有限制但是在实际的应用中也不能太大 , 即合理即可 浏览器地址栏中只有 action 属性值, 提交的数据是携带在 http 请求中, 不会展示在地址栏 注意 一定要给 input 元素设置 name 属性否则数据提交不到服务器 在 checkbox、select、radio 提交数据的时候是 value 属性的值 对应checkbox 复选框可以提交多个字但是name是统一的都是sportsprotxxsportyy 提交的数据一定要放在 form标签内否则数据不会提交 一定使用 form 标签将 input 元素包起来。 input标签 序号常用标签说明备注1input typetext文件输入框 value 设置默认显示内容 2input typepassword密码输入框 value 设置默认显示内容 3input typeradio单选框 name name属性可以对其进行分组 4input typereset重置按钮 value 属性修改按钮上的文本 5input typesubmit提交按钮 value 属性修改按钮上的文本 6input typebutton按钮 value 属性修改按钮上的文本 7input typefile文件上传域 8input typehidden 是隐藏域信息无需用户参与但提交时候发送给服务器 9input typecheckbox复选框 如果希望是同一组 保证 name 属性一致checkedchecked表示默认选中
select/option/textarea标签 说明 select 标签是下拉列表框 selectedselected设置默认选中 option 标签是下拉列表框中的选项 textarea 表示多行文本输入框 起始标签和结束标签中的内容是默认值 rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度 8、其他标签
块级元素block level element
在浏览器显示时它的内容通常会自动以新行来开始和结束无需写br/
div标签
div的全称就是division有时候我们也习惯叫图层div 标签可以把文档分割为独立的、不同的部分是可用于组合其他 HTML 元素的容器 div 元素经常与 CSS 一起使用用来进行文档布局
p标签 p 标签定义段落 p 元素会自动在其前后创建一些空白。
body
hello,world
divh3 stylecolor: bluethis is a h3/h3a hrefhttp://www.baidu.comgoto 百度/a
/div
/body body
p段落1/p
p段落2/p
p段落3/p
段落/br
段落/br
/body 内联元素inner element)
内联元素在显示时通常不会以新行开始如果不对span 应用样式span 标签没有任何的显示效果。
span标签 语法span内容/span 往往单独的去控制某个关键的内容可用作文本的容器
body
您的购物车有span stylecolor: red;font-size: 40px10/span个商品
/body
