宝应网站开发,手机网站重要性,当下最火的购物app,泰安集团网站建设价格HTML5 学习笔记
前言
该学习笔记的相关学习视频#xff1a;【狂神说Java】HTML5完整教学通俗易懂 目前笔记只有简单的例子和框架#xff0c;将来在实践中会进一步学习和补充内容 目录HTML5 学习笔记前言网页基本信息网页基本标签标题标签段落标签换行标签水平线标签字体样式…HTML5 学习笔记
前言
该学习笔记的相关学习视频【狂神说Java】HTML5完整教学通俗易懂 目前笔记只有简单的例子和框架将来在实践中会进一步学习和补充内容
目录HTML5 学习笔记前言网页基本信息网页基本标签标题标签段落标签换行标签水平线标签字体样式标签注释和特殊符号图像标签链接标签页面间链接锚链接功能性链接行内元素块元素行内元素行级标签块元素块级标签列表标签有序标签无序标签自定义标签表格标签媒体元素页面结构分析iframe内联框架表单文本框单选框多选框按钮下拉框文本域文件域其他组件邮箱网址数字滑块搜索框表单的应用只读隐藏域禁用表单元素的标注表单的初级验证placeholder 提示信息required 必填项pattern 正则表达式网页基本信息
!-- DOCTYPE:告诉浏览器使用何种规范html --
!DOCTYPE html
html langen!-- head标签代表网页的头部--
head!-- meta描述性标签用来描述网页的一些信息 --!-- meta一般用来做SEO搜索引擎优化--meta charsetUTF-8meta namekeywords contentHTML5 Studymeta namedescription contentOne day!-- title网页标题--titleMy First Webpage/title
/head!-- body标签代表网页主体--
bodyHelloWeb/body/html网页基本标签
标题标签
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6段落标签
h1北京欢迎你/h1
p北京欢迎你有梦想谁都了不起/p
p有勇气就会有奇迹。/p换行标签
h1北京欢迎你/h1
p北京欢迎你有梦想谁都了不起br/有勇气就会有奇迹。br/北京欢迎你为你开天辟地。br/
/p水平线标签
h1北京欢迎你/h1
!--水平线--
hr/
p北京欢迎你有梦想谁都了不起br/有勇气就会有奇迹。br/北京欢迎你为你开天辟地。br/
/p字体样式标签
!--粗体--
strong徐志摩人物简介/strong
p!--斜体--em1910/em年入杭州学堂br/em1918/em年赴美国克拉大学学习银行学br/
/p注释和特殊符号
特殊符号字符实体注释!-- --空格nbsp;大于号gt;小于号lt;引号quot;版权符号copy;
图像标签 img src../resources/image/img.png altdog titlethis is a dog height640 width640/图片地址可传入 绝对路径 和 相对路径
绝对路径从盘号开始例如C:/…
相对路径由当前 html文件 的目录开始通过 “…/” 查找上一级内容连用”…/可查找更上级的内容
链接标签
页面间链接
a hrefhttps://www.baidu.com点击我跳转到百度/a
br/
a hrefhttps://www.baidu.comimg src../resources/image/img.png altdog titlethis is a dog height640 width640/
/a链接入口可以以文本或图片的形式展示
target指定链接在那个窗口打开
a hrefhttps://www.baidu.com target_blank点击我跳转到百度/a
a hrefhttps://www.baidu.com target_self点击我跳转到百度/a_blank 表示在新的窗口页面打开 _self 表示在本窗口页面打开
target 默认值为_self
锚链接
a nametop顶部/a
!--
......
......
--
a href#top回到顶部/a锚链接可以跳转到页面的指定位置需先标记该位置
跳转到其他页面时也可指定跳转的位置
a hrefMy%20First%20Webpage.html#down跳转某页面到底部/a!--My Firs tWebpage.html--
a namedown底部/a功能性链接
发送电子邮件
a hrefmailto:1328540878qq.com点击联系我/a行内元素块元素
行内元素行级标签
行内元素可以排在同一行例如 a、strong、em…
块元素块级标签
块元素独占一行例如 p、h1-h6…
列表标签
有序标签
olliJava/liliPython/liliC/C/liliHTML5/liliCSS3/li
/ol无序标签
ulliJava/liliPython/liliC/C/liliHTML5/liliCSS3/li
/ul自定义标签
dldtLesson/dt !--列表标题--ddJava/ddddPython/ddddLinux/ddddC/dddtCity/dt !--列表标题--dd北京/dddd西安/dddd成都/dddd上海/dd
/dl表格标签
table border1pxtrtd colspan3学习成绩/td/trtrtd rowspan2张三/tdtdChinese/tdtd100/td/trtrtdMath/tdtd100/td/trtrtd rowspan2李四/tdtdChinese/tdtd60/td/trtrtdMath/tdtd60/td/tr
/tableborder 指定表格边框的宽度 colspan 表示扩列 rowspan 表示扩行
媒体元素
video src../resource/video/Piantou.mp4 controls autoplay/video
video src../resource/audio/QianQianquege.mp3 controls autoplay/videocontrols 代表显示控制条 autoplay 代表自动播放
页面结构分析
元素名描述header标题头部区域的内容footer标记脚部区域的内容sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用常用于侧边栏nav导航类辅助内容
headerh2网页头部/h2
/header
sectionh2网页内容/h2
/section
footerh2网页脚部/h2
/footeriframe内联框架
iframe srchttps://www.baidu.com namebaiduframeborder0 width1000px height800px/iframesrc引用页面地址 name框架标识名
!--在被打开的框架上加name属性--
iframe namemainFrame/iframe
!--在超链接上设置target目标窗口属性为希望显示的框架窗口名--
a hrefhttps://www.baidu.com/ targetmainFrame加载/atarget 表示以何种方式打开链接
表单
form actionpath methodgetp账号input typetext nameusername /pp密码input typepassword namepwd /ppinput typesubmitinput typereset/p
/formaction表示表单提交的位置可以是网址、请求处理地址 method post / get 两种提交方式 get方式提交可以在URL中看到提交的信息不安全但高效 post方式提交比较安全可以传输大文件
文本框
input type “text”
账号input typetext nameusername valueid maxlength12 size15name文本框名称(必填) value文本框初始值 size文本框长度 maxlength文本框可输入最多字符
单选框
input type “radio”
性别
input typeradio valuemale namesex checked/男
input typeradio valuefemale namesex/女name单选框名称(必填)一组的名称需要相同 checked初始单选按钮选中状态 value单选框的值
多选框
input type “checkbox”
爱好
input typecheckbox valuesleep namehobby/睡觉
input typecheckbox valuecode namehobby/敲代码
input typecheckbox valuechat namehobby/聊天
input typecheckbox valuegame namehobby checked/游戏name复选框名称(必填)一组的名称需要相同 checked初始复选按钮选中状态 value复选框的值
按钮
!--重置按钮--
input typereset namebutReset valuereset按钮
!--提交按钮--
input typesubmit namebutSubmit valuesubmit按钮
!--普通按钮--
input typebutton namebutButton valuebutton按钮/
!--图片按钮--
input typeimage srcimages/login.gif /图片按钮类似于图片链接
下拉框
国家
select namenationoption valueChina selected中国/optionoption valueJapan 日本/optionoption valueUS 美国/option
/select文本域
反馈
textarea nametextarea cols40 rows20文本内容/textarea文件域
input type “file”
input typefile namefiles /
input typesubmit nameupload value上传 /其他组件
邮箱
邮箱
input typeemail nameemail/提交时会检测输入的邮箱内容
必须含有 ‘’ 字符‘’ 前后必须有内容
网址
请输入你的网址:input typeurl nameuserUrl/提交时会检测URL地址格式是否正确
数字
请输入数字:
input typenumber namenum min0 max100 step10/min/max : 可以限定阈值 step 可以指定步长固定每次的增量 滑块
音量
input typerange namevoice min0 max10 step2/与数字框同理
搜索框
请输入搜索的关键词:
input typesearch namesousuo/表单的应用
只读
readonly
账号
input typetext nameusername valueadmin readonly 隐藏域
hidden
密码
input typepassword namepwd hidden 禁用
disabled
input typesubmit disabled
input typereset表单元素的标注
增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上
label foruser你点我试试/label
p账号input typetext nameusername iduser /p对应的 id 要一致
表单的初级验证
如果用户填写的表单内容不进行验证就发给服务器那么服务器发现填写的不合法或是没有填写就 会返回响应给用户用户重新填写再提交如此多次持续直到用户输入正确。它们之间的通信是通过网 络进行的如果网络很差那么注册一个账号就得花很长时间对用户来说是非常烦的对服务器来说 也增加了其工作压力。 要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。
表单验证的好处
减轻服务器的压力保证数据的可行性和安全性。
placeholder 提示信息
账号
input typetext nameusername placeholder请输入用户名required 必填项
input typetext nameusername required/规定文本框填写内容不能为空否则不允许用户提交表单
pattern 正则表达式
input typetext nametel required pattern^1[358]\d{9} /用户输入的内容必须符合正则表达式所指的规则否则就不能提交表单
