建设网站的网站叫什么男,运动器材网站开发方案,WordPress修改页眉,做网站dwHTML是什么
1.HTML#xff08;HyperText Mark-up Language#xff09;即超文本标签语言#xff08;可以展示的内容类型很多#xff09;
2.HTML文本是由HTML标签组成的文本#xff0c;可以包括文字、图形、动画、声音、表格、连接等
3.HTML的结构包括头部#xff08;He…HTML是什么
1.HTMLHyperText Mark-up Language即超文本标签语言可以展示的内容类型很多
2.HTML文本是由HTML标签组成的文本可以包括文字、图形、动画、声音、表格、连接等
3.HTML的结构包括头部Head、主体Body两大部分其中头部描述浏览器所需的信息而主体则包含所要说明的具体内容 HTML的运行方式
本地运行
没有意义就是看一下解释之类的
远程访问 HTML快速入门
使用idea编写hello.html运行效果
html开发工具Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等
创建html页面 !--文档类型说明 注释--
!DOCTYPE html
!--使用语言的地区 en 表示英国美国 en-US--
html langen
!--html 头--
head!--charset 文件的字符集--meta charsetUTF-8!--文件标题--titleTitle/title
/head
!--body 体主体部分--
body!--内容--
hello我个菜狗
/body
/html注意事项和细节
1.HTML文件不需要编译直接由浏览器进行解析执行
2.可以选择的浏览器是你电脑安装有的浏览器如果没有安装这个浏览器会报错 HTML基本结构
html基本结构 html注释的快捷键ctrl/注意要对快捷键做处理ctrlshift/
HTML标签
html的标签/元素 文档
1.在线文档w3school 在线教程
2.离线文档
html的标签/元素-说明
1.HTML标签用两个尖括号括起来
2.HTML标签一般是双标签如b和/b前一个标签是起始标签后一个标签为结束标签
3.两个标签之间的文本是html元素的内容
4.某些标签称为“单标签”因为它只需单独使用就能完整地表达意思如br/hr/
5.HTML元素指的是从开始标签到结束标签的所有代码 html标签注意事项和细节
标签使用细节
1.标签不能交叉嵌套
2.标签必须正确关闭
3.注释不能嵌套
4.html语法不严谨有时候标签不闭合属性不带“”也不报错
!DOCTYPE html
html langen
headmeta charsetUTF-8title标签使用细节/title
/head
body
!--
标签使用细节
1.标签不能交叉嵌套
2.标签必须正确关闭
3.注释不能嵌套
4.html语法不严谨有时候标签不闭合属性不带“”也不报错
--
!--标签不能交叉嵌套--
divspantom/span/div
!--divspantom/div/span错误用法--!--标签必须正确关闭--
spanjack/span
!--spanjack 错误用法--!--注释不能嵌套--!--html语法不严谨有时候标签不闭合属性不带“”也不报错--/body
/html !-- 4.html语法不严谨。有时候标签不闭合属性值不带“”也不报错 -- 严谨font colorbluehello,HTML/font 不严谨font colorbluehello,HTML/font br / br hello,world!~ font字体标签
用比较少主要用css !DOCTYPE html
html langen
headmeta charsetUTF-8titlefont标签/title
/head
body
!--字体标签
应用实例1在网页上显示 北京 并修改字体为微软雅黑颜色为蓝色
font标签是字体标签它可以用来修改文本的字体颜色大小尺寸
1color属性修改颜色
2face 属性修改字体
3size 属性修改文本大小
注意对应标签的属性顺序不做要求
--
!--font size40pxface微软雅黑colorred北京/font--
font colorblueface微软雅黑size3北京/font
/body
/html
字符实体
1.在网页上显示一些特殊的符号称为字符实体也叫符号实体
把hr/ 变成文本显示在页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title字符实体/title/head
body
!--特殊字符 应用实例把hr/变成文本显示在页面上常用的特殊字符 :lt; :gt;空格nbsp
--
jack
!--浏览器会将hr/解析成一条线输出--
hr/
lt;hr/gt;
smith smith2 hspbr/
smith
smith2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;hsp!--一个nbsp程序会解析成一个空格--
/body
/html
字符实体一览表 标题标签
1.标题使用h1-h6标签进行定义。h1定义最大的标题。h6定义最小的标题
2.应用实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title标题标签/title
/head
body
!--标题标签
应用实例演示标题1到标题6的h1 - h6都是标题标签 h1:最大 h6 :最小
align 属性是对齐属性
left 左对齐默认
center 居中
right 右对齐
--
h1 alignleft标签1/h1
h2标签2./h2
h3 aligncenter标签3/h3
h4标签4/h4
h5标签5/h5
h6 alignright标签6/h6
/body
/html 超链接标签
指从一个网页指向一个目标的连接关系这个目标可以是一个网页也可以是相同网页上的不同位置还可以是一个图片一个电子邮件一个文件甚至是一个应用程序 a href http://www.sohu.com搜狐/a a 标签是超链接 href 属性设置连接的地址 target属性设置哪个目标进行跳转 _self : 表示当前页面默认值即使用当前替换目标页 _blank : 表示打开新页面来进行跳转 点击超链接打开邮件
!DOCTYPE html
html langen
headmeta charsetUTF-8title超链接标签/title
/head
body
!--a 标签是超链接--
!--href 属性设置连接的地址--
!--target属性设置哪个目标进行跳转--
!--_self : 表示当前页面默认值即使用当前替换目标页--
!--_blank : 表示打开新页面来进行跳转--
a href http://www.sohu.com搜狐/abr/!--点击超链接打开邮件--a hrefmailto:abc163.com?subjecthelloabc163.com/abr/
/body
/html
无序列表 ul/li
ul/li基本语法 ul : 表示无序列表
li : 列表项
type 属性: 指定列表项前的符号
!DOCTYPE html
html langen
headmeta charsetUTF-8titleul li标签/title
/head
body
!--
ul : 表示无序列表
li : 列表项
type 属性: 指定列表项前的符号
--/body
/html 无序 有序列表 ol/li 图像标签img
1.img标签可以在html页面上显示图片图片要新建在文档下) 文件名imgs
直接ctrlv到文件 2.应用实例使用img标签显示一张美女的照片
img 标签是图片标签用来显示图片src 属性可以设置图片的路径指定在哪里width 属性设置图片的高度height属性设置图片的高度border 属性设置图片边框大小alt 属性设置当指定路径找不到图片时用来代替显示的文本内容相对路径从工程名开始算绝对路径盘符/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径.表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件相当于./文件名 ./可以省略
绝对路径正确格式是http://IP 地址.port/工程名/资源路径
错误格式是盘符:/目录/文件名
!DOCTYPE html
html langen
headmeta charsetUTF-8title图像标签/title
/head
body
!--应用实例使用img标签显示一张美女的照片
● img 标签是图片标签用来显示图片
● src 属性可以设置图片的路径
● width 属性设置图片的高度
● height属性设置图片的高度
● border 属性设置图片边框大小
● alt 属性设置当指定路径找不到图片时用来代替显示的文本内容
● 相对路径从工程名开始算
● 绝对路径盘符/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径.表示当前文件所在的目录.. 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件相当于./文件名./可以省略
绝对路径正确格式是http://IP 地址.port/工程名/资源路径错误格式是盘符:/目录/文件名一般指本地打开应用实例演示如何将图片做成超链接
--
!--如果只是指定width或者height浏览器会按比例显示不会变形--
img srcx.pngwidth300border1alt美女找不到/hr/
img src../1.pngwidth300border1alt美女找不到/hr/
img src../aaa/1.pngwidth100border1alt美女找不到/hr/
!--如果同时指定width height 自己要计算否则图像会变形--
img src../aaa/1.pngwidth200height80alt美女找不到/hr/
/body
/html 应用实例将图片做成超链接 表格table标签
基本语法 table 标签是表格标签 border 设置表格标签 width 设置表格宽度 height : 设置表格高度 align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr : 是行标签 th 是表头标签 td 是单元格标签 align 设置单元格文本对齐方式 b 是加粗标签 !DOCTYPE html
html langen
headmeta charsetUTF-8title表格标签/title
/head
body
!--说明
table 标签是表格标签 border 设置表格标签
width 设置表格宽度 height : 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr : 是行标签 th 是表头标签 td 是单元格标签
align 设置单元格文本对齐方式 b 是加粗标签
px : 表示像素-java 坦克大战
ctrl shift 下光标:将该行代码直接下移一行ctrlshift上光标将鼠标行所在代码直接上移一行
--
table width500border6aligncenterh1 aligncenter表格标签的使用/h1tr!--表头--th名字/thth住址/thth邮件/th/trtr !--第一行--td第1行第1列/tdtd第1行第2列/tdtd第1行第3列/td/trtr!--第二行--td第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtr!--第三行--td第3行第1列/tdtd第3行第2列/tdtd第3行第3列/td/tr
/table
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格标签/title
/head
body
!--说明
table 标签是表格标签 border 设置表格标签
width 设置表格宽度 height : 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr : 是行标签 th 是表头标签 td 是单元格标签
align 设置单元格文本对齐方式 b 是加粗标签
px : 表示像素-java 坦克大战
ctrl shift 下光标相对上面的代码该代码改变了像素
--
table width500pxborder6width300height100cellspacing0h1 aligncenter表格标签的使用/h1trth名字/thth住址/thth邮件/th/trtrtd第1行第1列/tdtd第1行第2列/tdtd第1行第3列/td/trtrtd第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第1列/tdtd第3行第2列/tdtd第3行第3列/td/tr
/table
/body
/html
表格标签-跨行跨列表格
编写如下网页修改table2.html 合并列colspan列数 合并行rowspan行数 cellspacing 指定单元格间的空隙大小0表示没有空隙 bordercolor指定表格边框的演示 border表格边框 width表格的宽度 !DOCTYPE html
html langen
headmeta charsetUTF-8title表格跨行跨列/title
/head
body
!--column列
合并列colspan列数colspan跨列;合并列;合并单元格
合并行rowspan行数rowspan跨行;合并行;跨行属性;行宽
cellspacing 指定单元格间的空隙大小0表示没有空隙
bordercolor指定表格边框的演示
border表格边框
width表格的宽度思路
1.先把整个表格的完整地行和列展示出来5*3
2.在使用合并的技术来处理
3.如果是16进制的颜色前面#截取颜色快捷工具Faststone Capture
--
table border1 height250 bordercolor#E87EFAcellspacing0width500tr!--合并了3列--td aligncentercolspan3第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.pngwidth100/tdtd第5行第3列/td/tr
/table
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格跨行跨列/title
/head
body
!--
合并列colspan列数
合并行rowspan行数
cellspacing 指定单元格间的空隙大小0表示没有空隙
bordercolor指定表格边框的演示
border表格边框
width表格的宽度
--
table border1px bordercolor#E87EFAcellspacing0width400pxtr!--合并了3列--td aligncentercolspan3星期一菜谱/td/trtr!--合并行跨行row行--td rowspan2素菜/tdtd青草茄子/tdtd花椒扁豆/td/trtrtd小葱豆腐/tdtd炒白菜/td/trtr!--合并行跨行row行--td rowspan2荤菜/tdtd油焖大虾/tdtd海参鱼翅/td/trtrtd红烧肉img srcimgs/2.pngwidth100/tdtd烤全羊/td/tr
/table
/body
/html
form表单标签介绍 url表示定位一个web资源的路径method主要是两种getpost form表单元素-小练习
模拟演示登录form_login.html ok.html 1.form 表示表单 2.action 提交到哪个页面 3.method 提交方式常用get和post 4.input typetext 输入框 5.input typepassword 密码框 6.input typesubmit 提交按钮 7.input typereset 重置按钮 小技巧为了汉字对齐输入全角的空格即可 method不写默认是get !DOCTYPE html
html langen
headmeta charsetUTF-8title表单登录/title
/head
body
!--说明
1.form 表示表单
2.action 提交到哪个页面
3.method 提交方式常用get和post
4.input typetext 输入框
5.input typepassword 密码框
6.input typesubmit 提交按钮
7.input typereset 重置按钮
小技巧为了汉字对齐输入全角的空格即可(切换为英文右键“英”字点击全半角切换method不写默认是get--
form actionok.htmlmethodget!--form包起来表示是表单的标签/元素--用户名input typetextnameusernamebr/密码input typepasswordnameusernamebr/input typesubmitvalue登录input typereset value重新填写
/form
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8title登陆成功/title
/head
body
h1恭喜你登录OK/h1/body
/html input标签/元素 checked代表默认选中即不选择默认选中 input type Image namesubmit表示图像提交
!DOCTYPE html
html langen
headmeta charsetUTF-8title表单登录/title
/head
body
!--说明
1.form 表示表单
2.action 提交到哪个页面
3.method 提交方式常用get和post
4.input typetext 输入框
5.input typepassword 密码框
6.input typesubmit 提交按钮
7.input typereset 重置按钮
小技巧为了汉字对齐输入全角的空格即可(切换为英文右键“英”字点击全半角切换method不写默认是get--
form actionok.htmlmethodget用户名input typetextnameusernamebr/密 码input typepasswordnameusernamebr/input typesubmitvalue登录input typereset value重新填写input typeImagesrc2.pngwidth50value登录
/form
/body
/html select/option/textarea标签 option value网游 selected网游/optionoption以及/option之间的文本是给客户看的提交给URL的是value网游的网游 textarea rows行 cols列 表单综合练习 !DOCTYPE html
html langen
headmeta charsetUTF-8title表单综合案例/title
/head
body
!--一定一定要用form标签把input元素包起来--
!--提交给URL的是value属性的值而不是客户所看到的值--
form用户注册信息br/!--一定一定要给input元素设置name属性否则数据提交不到URL即服务器--用户名称input typetextnameusernamebr/用户密码input typepasswordnameusernamebr/确认密码input typepasswordnameusernamebr/选择你喜欢的运动项目!--注意checkbox是复选框如果希望是同一组数据name要一致--input typecheckboxnamesportvaluelq篮球br/input typecheckboxnamesportvaluezqchecked足球br/input typecheckboxnamesportvaluesq手球br/请选择性别!--单选typeradio--!--这里name都要是gender同名如果不一样就不是单选--input typeradionamegendervaluemale男br/input typeradionamegendervaluefemale女br/请选择城市select namecityoption valuecd成都/optionoption valuebj北京/optionoption valuesh上海/option/selectbr/自我介绍textarea rows10cols20/textarea选择你的文件头像input typefilenamemyfilevalue上传头像br/input typesubmitvalue提交/input typeresetvalue重置/
/form
/body
/html 表单格式化 ctrld复制选中行数的所有代码
ctrlx删除代码
