教育培训营销型网站建设哪家好,网站建设管理 优帮云,flask 简易网站开发,商城网站支付端怎么做的HTML(Hyper Text Markup Language)超文本标记语言
W3C
World Wide Web Consortium(万维网联盟) 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
结构化标准语言(HTML、XML)表现标准语言(CSS)行为标准(DOM、ECMAScript)
!-- DOCTYPE:告…HTML(Hyper Text Markup Language)超文本标记语言
W3C
World Wide Web Consortium(万维网联盟) 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
结构化标准语言(HTML、XML)表现标准语言(CSS)行为标准(DOM、ECMAScript)
!-- DOCTYPE:告诉浏览器使用的规范 --
!DOCTYPE html
html langen
head
!-- meta描述性标签,用来描述网页的一些信息 --
meta charsetUTF-8
meta namekeywords contentkeyword
meta namedescription contentdescription!-- title网页标题 --
titletitle/title/head
!-- body标签代表网页主体 --
body
/body
/html网页基本标签
标题标签段落标签换行标签水平线标签字体样式标签注释和特殊符号
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!-- 标题标签 --
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
h6六级标签/h6!-- 段落标签 --
p/p!-- 换行标签 --
br!-- 水平线标签--
hr!-- 粗体,斜体 --
strong粗体/strong
em斜体/em
!-- 特殊符号 --
空格: 空nbsp;格
大于: gt;
小于: lt;
版权符号: copy;/body
/html图像标签
img srcpath alttext titletext widthx heighty/
src:图像路径(必填)
alt:图像的替代文字(必填)
title:鼠标悬停提示文字
width:图像宽度
height:图像高度链接标签
a hrefpath target目标窗口位置链接文本或图像/a
href:表示要跳转到的页面(必填)
target_blank在新标签中打开
target_self在本页面打开锚链接
1.需要一个标记,2.跳转到标记
a nametop顶部/a
...
a href#top回到顶部/a功能性链接
邮件:mailto a hrefmailto:avenger_keynes163.com联系/a
块元素
无论内容多少,该元素独占一行 (p\h1-h6…)
行内元素
内容撑开宽度,左右都是行内元素的可以排在一行 (a strong em …)
列表
列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式展示出来,以便浏览者能更快捷的获得相应的信息
列表的分类
无序列表有序列表定义列表
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitletitle
/head
body
!-- 有序列表 --
olliJava/liliPython/lili运维/lili前端/li
/ol!-- 无序列表 --
ulliJava/liliPython/lili运维/lili前端/li
/ul!-- 定义列表
dl:标签
dt:列表名称
dd:列表内容
--
dldt学科/dtddJava/ddddPython/dddd运维/dddd前端/dd
/dl/body
/html表格标签
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
table border1pxtr!-- 跨列 colspan --td colspan4/td/trtr!-- 跨行 rowspan --td rowspan2/tdtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/tr
/table
/body
/html媒体元素
视频元素
video
音频元素
audio
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!--
src:资源路径
controls:控制条
autoplay:自动播放--
video src路径 controls autoplay/videoaudio src路径 controls autoplay/audio
/body
htnl页面结构
元素名描述header标题头部区域内容(用于页面或页面中的一块区域)footer标记脚部区域的内容(用于整个页面或页面的一块区域)sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用(常用于侧边栏)nav导航类辅助内容
iframe内联框架
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!--
src:地址
w-h:宽度高度
--
iframe src namehello frameborder0 width1000px height800px/frame
!-- 通过a标签向iframe传递页面 --
a href地址 targethello点击跳转/a
/body
/html表单语法
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!-- 表单form
action:表单提交位置,可以是网站,也可以是一个请求处理地址
method: post,get 提交方式get方式提交:可以在url中看到提交的信息,不安全,高效post方式提交:比较安全,传输大文件--
form methodpost actionresult.html
!-- 文本框:input typetext --
p名字:input typetext nameusername/pp密码input typepassword namepwd/ppinput typesubmitinput typereset
/p
/form
/body
/html表单元素格式
属性说明type指定元素的类型.text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为textname指定表单元素的名称value元素的初始值.type为radio时必须指定一个值size指定表单元素的初始宽度.当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位maxlengthtype为text或password时,输入的最大字符数checkedtype为radio或checkbox时,指定按钮是否是被选中 例(单选框):
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!-- 单选框
input typeradio
value: 单选框的值
name: 表示组--
p性别:
input typeradio valueboy namesex checked/男
input typeradio valuegirl namesex/女
/p
/body
/html例(多选框):
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!-- 多选框
input typecheckbox
--
pinput typecheckbox valuesleep namehobby/睡觉input typecheckbox valuecode namehobby checked/敲代码input typecheckbox valuechat namehobby/聊天input typecheckbox valuegame namehobby/游戏
/p
/body
/html例:
!DOCTYPE html
html langen
headmeta charsetUTF-8titletitle/title
/head
body
!-- 按钮
input typebutton 普通按钮
input typeimage 图像按钮
input typesubmit 提交按钮
input typereset 重置
--
p按钮:input typebutton namebtn1 value点击变长/input typeimage src路径/
/p
pinput typesubmitinput typereset value清空表单/
/p
!-- 下拉框,列表框 --p下拉框select name列表名称option value选项的值中国/optionoption value选项的值美国/optionoption value选项的值 selected瑞士/optionoption value选项的值印度/option/select
/p!-- 文本域 --
p反馈:textarea nametextarea cols50 rows10文本内容/textarea
/p
!-- 文件域 --
pinput typefile namefiles/input typebutton value上传 nameupload/
/p
!-- 邮箱验证 --
pinput typeemail nameemail
/p
!-- URL --
pinput typeurl nameurl
/p
!-- 数字 --
pinput typenumber namenum max100 min0 step10/
/p
!-- 滑块
input typerange--
pinput typerange namevoice min0 max100 step1/
/p
!-- 搜索框 --
pinput typesearch namesearch/
/p!-- 增强鼠标可用性 --
plabel formark你点我试试/labelinput typetext idmark/
/p
/body
/html表单的应用
隐藏域 hidden只读 readonly禁用 disabled
表单初级验证
常用方式
placeholder 提示信息required 非空判断pattern 正则表达式
