免费网站建设多少钱,怎么查询企业邮箱账号,做网站一定要正版系统吗,太仓企业网站建设公司一、了解几个概念
1、HTML定义
HTML是#xff08;Hyper Text Markup Language#xff09;超文本标记语言#xff0c;超文本包含#xff1a;文字、图片、音频、视频、动画等。
2、W3C 是什么#xff1f;
W3C 即#xff08;World Wide Web Consortium#xff09; 万维…一、了解几个概念
1、HTML定义
HTML是Hyper Text Markup Language超文本标记语言超文本包含文字、图片、音频、视频、动画等。
2、W3C 是什么
W3C 即World Wide Web Consortium 万维网联盟。W3C标准包括结构化标准语言、表现标准语言 行为标准。
二、HTML结构和 语法
1、HTML基本结构
由头部和主体部分组成即head 和 body 成对的标签。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body/body
/html
2、HTML的基本信息
title标签meta 标签1、title标签
TITLE标签主要的作用有两点一是告诉访客该篇文章的主题是什么 二就是给搜索引擎索引告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。
2、META标签
META标签是HTML标记HEAD区的一个关键标签它位于HTML文档的head和title之间有些也不是在head和title之间。 它提供的信息虽然用户不可见但却是文档的最基本的元信息。 meta除了提供文档字符集、使用语言、作者等基本信息外还涉及对关键词和网页等级的设定。
例如
meta namekeywords contentHTML,ASP,PHP,SQL 必需属性content
meta的必需属性是content当然并不是说meta标签里一定要有content而是当有http-equiv或name属性的时候一定要有content属性对其进行说明。
例如
meta namekeywords contentHTML,ASP,PHP,SQL可选属性
对于meta的可选属性说到了三个分别是http-equiv、name和scheme。
http-equiv
http-equiv属性是添加http头部内容对一些自定义的或者需要额外添加的http头部内容需要发送到浏览器中我们就可以是使用这个属性。例如我们不想使用js来重定向用http头部内容控制那么就可以这样控制
meta http-equivRefresh content5;urlhttp://blog.yangchen123h.cn /在页面中加入这个后5秒钟后就会跳转到指定页面啦
name
第二个可选属性是name这个属性是供浏览器进行解析对于一些浏览器兼容性问题name属性是最常用的当然有个前提就是浏览器能够解析你写进去的name属性才可以不然就是没有意义的。
meta namerenderer contentwebkitcharset
charset是声明文档使用的字符编码解决乱码问题主要用的就是它值得一提的是这个charset一定要写第一行不然就可能会产生乱码了。
charset有两种写法
meta charsetutf-8
meta http-equivContent-Type contenttext/html; charsetutf-8禁止百度转码
百度会自动对网页进行转码这个标签是禁止百度的自动转码
meta http-equivCache-Control contentno-siteapp /SEO 优化部分
!-- 页面标题title标签(head 头部必须) --
titleyour title/title
!-- 页面关键词 keywords --
meta namekeywords contentyour keywords
!-- 页面描述内容 description --
meta namedescription contentyour description
!-- 定义网页作者 author --
meta nameauthor contentauthor,email address
!-- 定义网页搜索引擎索引方式robotterms 是一组使用英文逗号「,」分割的值通常有如下几种取值nonenoindexnofollowallindex和follow。 --
meta namerobots contentindex,followviewport
viewport主要是影响移动端页面布局的例如
meta nameviewport contentwidthdevice-width, initial-scale1.0content 参数
width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否允许用户缩放(yes/no)
3、标题H1-H6标签 标题H1-H6标签是指网页html 中对文本标题所进行的着重强调的一种标签以标签h1、h2、h3到h6依次显示重要性的递减制作标签的主要意义是告诉搜索引擎这个是一段文字的标题起强调作用。 标题标签数字越大字体越小
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
h6六级标签/h6
4、段落标签
段落标签间隔相对换行标签要大一些
p段落标签/p
p段落标签/p5、换行标签 换行标签是单标签 换行标签相对段落标签的间隔要小的多更加的紧凑 这是换行标签单标签br/
这是换行标签单标签br/
6、水平线标签
!--水平线标签--
hr/7、字体样式标签
strong粗体/strong
em斜体/em8、注释和特殊符号
!--注释-- 快捷键 Ctrl /
nbsp;nbsp;nbsp;nbsp; !--空格--
gt; !-- --
lt; !- --
copy; !-- © --
9、图像
!--img标签 src图片地址相对地址推荐使用和绝对地址 ../ 表示上一级目录
--
img src../resources/image/2.jpg alttext title这是一张图 width200 height200
/body
/html10、链接标签
a href target/a11、无序列表标签
ulli3/lili2/lili5/lili4/lili1/li
/ul
12、有序列表标签
olli1/lili2/lili3/lili4/li
/ol13、定义列表标签
dldt姓名/dtdd年龄/dddd昵称/dd
/dl14、表格标签
table border1pxtrtd colspan5 aligncenter成绩/td/trtrtd rowspan3统计/tdtd姓名/tdtd语文/tdtd数学/tdtd英语/td/trtrtd小明/tdtd20/tdtd10/tdtd30/td/trtrtd小红/tdtd80/tdtd90/tdtd96/td/tr
/table
15、视频元素 video标签
video src../resources/video/1234.mp4 controls/video16、音频元素 audio标签
video src../resources/video/1234.mp3 controls/video17、页面结构
head 标题头部区域的内容用于页面或页面中的一块区域
headmeta charsetUTF-8title页面结构/title
/headfooter 标记脚部区域的内容用于整个页面或页面的一块区域
footerh2网页脚部/h2
/footersection Web页面中的一块独立区域
sectionh2网页主体/h2
/sectionarticle 独立的文章内容
aside 相关内容或应用常用于侧边栏 nav 导航类辅助内容
18、iframe 内联框架
iframe src namehello frameborder0 width500 height500/iframe三、表单及表单标签的应用
1、form 表单标签
!-- action 表单提交的位置 可以是网站也可以是一个请求处理的地址methodpost-get 提交方式get 方式不安全可以在url看到提交的信息 不安全但是高效 不能传输大文件post 比较安全 可以传输大文件
--form action1.html methodpost
!-- 文本输入框 input typetext--p名字input typetext nameusername/p
!-- 密码框 input typepassword--p密码input typepassword namepwd/ppinput typesubmitinput typereset/p
/form 2、下拉框 p下拉框select name列表名称option valueZH中国/optionoption valueJA日本/optionoption valueAM美国/optionoption valueRS selected瑞士/option/select/p
3、多行文本输入框 p多行文本输入框textarea nametextarea id cols30 rows10文本内容/textarea/p4、文件 pinput typefile namefilesinput typebutton nameupdate value上传/p5、邮箱
p邮箱input typeemail nameemail
/p6、url
purlinput typeurl nameurl
/p7、number 数字输入
p商品数量input typenumber namenumber max100 min0 step10
/p8、range 滑块
p音量input typerange namevoice max100 min0 step1
/p9、搜索框
p搜索框input typesearch namesearch
/p10、隐藏域 存在仅仅是隐藏
input typetext value name hidden11、只读
input typetext value name readonly12、禁用
input typetext value name disabled13、表单验证
为什么要进行表单验证 减轻服务器的压力 保证数据的安全性
常用方式 placeholder 文本框添加提示信息 required 非空判断 pattern 正则表达式
!-- 文本框添加提示信息 非空判断--p名字input typetext nameusername placeholder请输入用户名 required/p
!-- 邮箱正则表达式 --
p邮箱input typeemail nameemail pattern[1-9]\d{7,10}qq\.com
/p
