网站建设7个主要流程图,软件公司招聘最新信息,网络推广公司排行榜,owl WordPress主题1. 初识HTML
什么是HTML#xff1f; Hyper Text Markup Language : 超文本标记语言
超文本包括#xff1a;文字、图片、音频、视频、动画等
目前使用的是HTML5#xff0c;使用 W3C标准
W3C标准包括#xff1a;
结构化标准语言#xff08;HTML、XML#xff09;
表现标…1. 初识HTML
什么是HTML Hyper Text Markup Language : 超文本标记语言
超文本包括文字、图片、音频、视频、动画等
目前使用的是HTML5使用 W3C标准
W3C标准包括
结构化标准语言HTML、XML
表现标准语言CSS
行为标准语言DOM、JavaScript2. 网页基本元素
HTML基本结构
网页头部主体部分
网页基本信息
DOCTYPE声明告诉浏览器我们要使用什么规范标签 网页标题标签描述性标签用来描述网站的一些信息
!DOCTYPE html
html langen
!--head标签代表网页头部--
headmeta charsetUTF-8!--meta一般用来做SEO--meta namekeyboards contentJavameta namedescription content学习Java!--网页标题--titleTitle/title
/head
!--body标签代表网页主体--
body
HelloWorld
/body
/html3. 网页基本标签
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
!DOCTYPE html
html langen
headmeta charsetUTF-8title基本标签/title
/head
body
!--1、标题标签--
h1一级标签/h1
h2二级标签/h2
h6六级标签/h6!--2、段落标签--
p
这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段
/p
p第一段/p
p第二段/p
p第三段/p!--3、换行标签--
!--br、hr是自闭合标签习惯上最好加/结尾--
第一行 br/
第二行
!--4、水平线标签--
hr/!--5、字体样式标签--
粗体strongeI LOVE YOU /stronge
斜体emI LOVE YOU /emhr/!--6、特殊符号--
空 nbsp;nbsp;nbsp;nbsp;nbsp;格br/
大于号gt; br/
小于号lt; br/
版权符号copy;!--7、注释--
/body
/html4. 图像标签
常见图像格式
JPG GIF PNG BMP位图 … 语法
body
img srcpath alttext title标题 widthx heighty
src图像地址
alt图像的替代文字找不到该图片时才会显示
title鼠标悬停提示文字
width:图像宽度
height:图像高度/body练习新建放置图片的目录
body
!--src:图片地址相对地址../ 1.html文件的上一级目录 (不推荐)绝对地址C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
--
img src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500/body5. 链接标签
文本超链接点击文本进行跳转
图像超链接点击图片进行跳转
语法
!--链接标签--
a hrefpath target目标窗口位置链接文本或图像/a
href必填 表示要跳转到那个页面
target:表示窗口在哪里打开默认是当前页面打开_blank在新的标签页打开_self:在自己的网页中打开练习
body!--文字超链接--
a hrefhttp://www.baidu.com target_blank点击我跳转到百度/abr!--图像超链接--
a hrefhttp://www.baidu.comimg src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500
/a/body锚链接
通过# 实现页面间的跳转跳转到另一个页面指定的位置
练习
body!--锚链接1.需要一个标记2.然后跳转到标记3.使用 #
--
!--先设置一个标记--
a idtop我是顶部/a!--图片1--
pa hrefhttp://www.baidu.comimg src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500/a
/p
!--图片2--
pa hrefhttp://www.baidu.comimg src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500/a
/p
!--图片3--
pa hrefhttp://www.baidu.comimg src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500/a
/p
!--图片4--
pa hrefhttp://www.baidu.comimg src../resources/image/1.JPG alt顶上战争 title路飞VS三大将 width889 height500/a
/p
!--也可以跳转到另一个页面的指定位置 : href2.html#top--
a href#top跳转到顶部/a/body功能性链接
!--邮件链接mailto--
a hrefmailto:156420xxxxqq.com点击联系我/a6. 行内元素和块元素
块元素
无论内容多少该元素独占一行p标签、h1-h6…
行内元素
内容撑开宽度左右都是行内元素的可以在排一行a 标签、strong 标签、em 标签…
7. 列表
列表的分类
有序列表无序列表自定义列表
body!--有序列表--
olliJava/lilipython/lili运维/li
/ol
!--无序列表--
ulliJava/lilipython/lili运维/li
/ul
!--自定义列表dl标签dt:列表名称dd列表内容
--
dldt学科/dtddJava/ddddpython/dddd运维/dddt位置/dtdd北京/dddd珠海/dd
/dl/body效果
8. 表格
为什么使用表格
简单通用结构稳定
基本结构
单元格行 tr列 td跨行 rowspan跨列 colspan
body
table border1px!--加个边框--trtd1-1/tdtd1-2/tdtd1-3/tdtd1-4/td/trtrtd2-1/tdtd2-2/tdtd2-3/tdtd2-4/td/trtrtd3-1/tdtd3-2/tdtd3-3/tdtd3-4/td/tr/table/body效果
table border1px!--加个边框--tr!--让这个单元格跨两列--td colspan21-1/tdtd1-2/tdtd1-3/td/trtr!--让这个单元格跨两行--td rowspan22-1/tdtd2-2/tdtd2-3/tdtd2-4/td/trtrtd3-2/tdtd3-3/tdtd3-4/td/tr/table
效果
9. 媒体元素
视频元素video
音频元素audio
!--媒体元素
视频controls:滚动条autoplay自动播放
--
video src../resources/video/4.mp4 controls autoplay/videoaudio src../resources/audio/萤火虫和你.mp3 controls/audio
10. 页面结构分析 body
headerh2网页头部/h2
/headersectionh2网页主体部分/h2
/sectionfooterh2网页脚部/h2
/footer
/body
11. iframe内联框架
语法
iframe srcpath frameborder0 namemainFrame/iframe引用页面地址 框架标示名body
!--iframe内联框架--
iframe src//player.bilibili.com/player.html?aid68373450bvidBV12J41137hucid118499718page1scrollingnoborder0framebordernoframespacing0allowfullscreentrue
/iframeiframe srchttps://www.bilibili.com/ frameborder1px namemainFrame width400px height100px/iframe!--通过a标签往iframe里加东西--
iframe src frameborder1px namehello width400px height300px/iframe
!--通过target属性绑定指定的iframe--
a hrefhttps://www.bilibili.com/ targethello点击我跳转到B站/a/body
12. 初识表单post和get提交
表单语法
!--初识表单post和get提交method:规定如何发送表单数据常用值post、getget方式提交可以在url中看到提交的信息post方式提交比较安全可以传输大文件action:表示向何处发送表单数据,可以是一个网站或者一个请求处理地址
--
form methodget action2.基本标签.html!--文本输入框text--p姓名input typetext nameusername/p!--密码框password--p密码input typepassword namepassword/p!--提交--input typesubmit!--重置--input typereset
/form效果 表单元素格式
13. 文本框和单选框
单选框
!--单选框标签input typeradiovalue单选框的值name表示组name相同为一个组即只能选择一个
--
radio!--checked表示默认选中--input typeradio valueboy namesex checked/男input typeradio valuegirl namesex/女
/radio多选框
!--多选框--
p 爱好!--checked表示默认选中--input typecheckbox valuesleep namehobby checked睡觉input typecheckbox valuebook namehobby看书input typecheckbox valueswimming namehobby游泳input typecheckbox valuewrite namehobby写作/p14. 按钮和多选框
普通按钮
!--按钮--
p 按钮input typebutton namebtn1 value点击查看
/p效果 图片按钮
input typeimage namebt2 src../resources/image/1.jpg!--可以点击提交相当于submit--下拉框
p国家select namecountryoption valuechina中国/optionoption valueus美国/option!--selected表示默认选中--option valueruishi selected瑞士/option/select
/p15. 文本域和文件域
文本域
!--文本域--
p反馈textarea nametextarea cols50 rows10文本内容/textarea
/p文件域
!--文件域--
input typefile namefiles16. 搜索框滑块和简单验证
!--邮件验证--
p 邮箱input typeemail nameemail
/pp URLinput typeurl nameurl
/pp numberinput typenumber namenumber max100 min0 step10
/p!--滑块--
p音量input typerange namevoice min0 max10
/p!--搜索框--
p搜索input typesearch namesearch
/p
17. 表单的应用
隐藏域 hidden只读 readonly禁用 disabled
body只读p姓名input typetext nameusername valuelisa readonly/pp禁用!--disabled可以放到任何地方无法选择男--input typeradio valueboy namesex disabled/男input typeradio valuegirl namesex/女/p!--隐藏域hidden密码框不见了但值依然在--p密码input typepassword namepassword hidden value123456/p/body增强鼠标的可用性
p增强鼠标的可用性brlabel formark你点我试试/labelinput typetext idmark
/p点击文字自动跳转到对应的输入框
18. 表单初级验证
思考
减轻服务器的压力安全性
常用方式
placeholder 提示信息required 元素不能为空应用于所有的文本框中pattern 正则表达式
bodyp姓名input typetext nameusername placeholder请输入用户名/pp姓名input typetext nameusername placeholder请输入用户名 required/pp 自定义邮箱input typetext namediyEmail pattern^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/p/body
