哪些网站会盗取,中国电子商务官网,wordpress home.php index.php,网站建设验收评审标准目录 页面结构
网页基本标签
图像标签
超链接标签
文本链接
图像链接
锚链接
功能链接
列表
有序列表
无序列表
自定义列表
表格
跨列/跨行
表头
媒体元素
视频
音频
网站的嵌套
表单
表单元素
文本框
单选框
多选框
按钮
下拉框
文本域和文件域
表…目录 页面结构
网页基本标签
图像标签
超链接标签
文本链接
图像链接
锚链接
功能链接
列表
有序列表
无序列表
自定义列表
表格
跨列/跨行
表头
媒体元素
视频
音频
网站的嵌套
表单
表单元素
文本框
单选框
多选框
按钮
下拉框
文本域和文件域
表单验证 页面结构 一个最基础的html代码大概长这样 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html !DOCTYPE html规定了浏览器使用的规范为HTML5html:是HTML文档的根元素所有内容必须写在html标签里通常包括head和body两部分head:代表网页头部通常包含网站的标题、导航菜单、搜索框或其他重要的引导内容。一个页面可以有一个或多个 header 元素title显示在浏览器标签页上的网页标题meta:描述性标签用来描述网站的一些信息。例如meta charsetUTF-8设置字符编码为UTF-8name 和 content 属性用于提供网页的元数据主要用于对搜索引擎优化SEObody:网页主体大部分内容都在body中编写 除了上述出现的最基本结构外还有一些扩展结构
footer用于定义网页的底部区域通常包含版权信息、联系方式、网站链接或其他结尾部分的内容。一个页面可以有一个或多个 footer 元素section用于定义网页中的一个独立区域用于把页面内容分成多个逻辑块每个块代表一个主题区域article用于定义独立的文章内容例如博客文章、新闻文章、评论等aside用于定义与主内容相关的额外内容通常用于侧边栏、广告、推荐内容、相关文章等nav用于导航栏链接到页面其他部分或其他页面 网页基本标签 h1-h6: 标题标签从h1到h6依次重要性递减p/p:段落标签在同一个p标签内显示为一段会自动在前后加上间距。可以通过添加p标签分段br/:自闭合标签换行但不会创建新的段落hr/:自闭和标签在页面中插入一条水平线strong/strong:粗体em/em:斜体 图像标签 img标签用于在网页中嵌入图像。它是一个自闭合标签不需要闭合标签/img。
在img标签中配置属性来展示图像 src必填指定了图像文件的路径可以是相对路径或绝对路径alt必填图像的替代文本通常用来描述图像的内容。当图像无法加载时浏览器会显示该文本title图像的悬停提示文本当用户将鼠标悬停在图像上时浏览器会显示该文本width/height图像的宽度和高度单位为像素px如果不指定则将以原始尺寸显示 示例
img srcexample.jpg alt示例图片 title悬停文字 width300 height300超链接标签 a标签是 HTML 中用来定义超链接的标签可以将用户引导到其他页面、网站、邮件地址等
a标签为非自闭合标签需要使用闭合标签/a a标签中的常用属性
href必填指定了超链接的目标URL用户点击链接时会跳转到该目标地址。链接没有目标时浏览器会默认跳转到当前页面。 文本链接 点击文本会跳转到指定的URL例如
a hrefhttps://www.baidu.com百度/a 图像链接 可以在 a 标签中嵌套图像使图像本身成为一个点击链接 a hrefhttps://www.example.comimg srcexample.jpg alt示例图片
/a锚链接 锚链接允许在同一页面内跳转到指定的位置。它需要使用两个步骤
定义目标位置通常使用id/name属性来指定某个位置。链接到该目标通过 href 属性引用该位置。 例如 a href#section2跳转到第二部分/a
!-- 在页面中的某个位置 --
a namesection2/a 跨页面跳转也可以在其他页面中跳转到指定页面的某个锚点位置
a hrefpage.html#section2跳转到第二部分/a此链接会打开 page.html 页面并跳转到 section2 锚点位置 功能链接 除了普通的网页跳转a 标签还可以用于触发其他操作比如发送电子邮件
可以使用 mailto协议在点击链接时打开默认的邮件客户端并预先填入收件人地址 例如
a hrefmailto:1234156qq.com点击联系我/a列表 有序列表 有序列表使用 ol 标签来表示列表项通过 li 标签进行定义。ol 会自动为每个列表项添加序号按照顺序排列 olli第一项/lili第二项/lili第三项/li
/ol效果如下 无序列表 无序列表使用 ul 标签列表项同样通过 li 标签进行定义。无序列表不会自动添加编号而是使用圆点、方块或其他标记 ulli第一项/lili第二项/lili第三项/li
/ul自定义列表 自定义列表使用 dl 标签包含表头和列表内容
dt定义表头dd定义列表的每一项 dldt表头/dtdd1/dddd2/dd
/dl 表格 table 标签用于定义表格表格的内容会分为多个行和列。表格中通常会包括表头、表格行、表格单元等元素。
border设置表格的边框宽度tr定义一行td定义单元格 table border1trtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr
/table效果如下 跨列/跨行 colspan 属性让单元格跨越多个列。通过设置 colspann可以让该单元格横跨 n 列 例如 table border1trtd colspan2跨越两列的单元格/td/trtrtd第一行第一列/tdtd第一行第二列/td/tr/table 效果如下 同理rowspan 属性让单元格跨越多行。通过设置 rowspann可以让该单元格横跨 n 行 table border1trtd rowspan2跨越两行的单元格/tdtd第一行第二列/td/trtrtd第二行第二列/td/tr/table 效果如下 表头 可以使用 th 标签表示表头和 td 类似但通常呈现为加粗且居中的文本 例如
table border1trth姓名/thth年龄/th/trtrtd张三/tdtd25/td/trtrtd李四/tdtd30/td/tr
/table 效果如下 媒体元素 视频 video 标签用于在网页中嵌入视频文件 常用属性
src指定视频文件的URLcontrols启用视频控制条可以播放、暂停、调整音量等autoplay视频加载完成后自动播放loop视频播放结束后自动循环播放muted视频初始播放时静音poster指定视频未播放时显示的封面图片 如果浏览器不支持 video 标签浏览器会显示 您的浏览器不支持视频标签 这段文本。也可以在 video 标签中加入其他文本。 例如
video srcvideo.mp4 controls autoplay loop muted posterposter.jpg您的浏览器不支持视频标签。
/video 音频 audio 标签用于在网页中嵌入音频文件 常用属性如下
src指定音频文件的URLcontrols启用音频控制条可以播放、暂停、调整音量等autoplay音频加载完成后自动播放loop音频播放结束后自动循环播放muted音频初始播放时静音 例如
audio srcaudio.mp3 controls autoplay loop muted您的浏览器不支持音频标签。
/audio由于不同的浏览器支持的文件格式可能有所不同为了确保媒体文件的兼容性可以使用多种格式的媒体文件
video controls autoplaysource srcvideo.mp4 typevideo/mp4source srcvideo.ogg typevideo/ogg您的浏览器不支持视频标签。
/videoaudio controls autoplaysource srcaudio.mp3 typeaudio/mp3source srcaudio.ogg typeaudio/ogg您的浏览器不支持音频标签。
/audio网站的嵌套 iframe 标签是可以在当前网页中嵌入其他网页类似于一个小窗口显示其他网页内容 常用属性
src指定要嵌入的网页的URL地址name指定 iframe 的名称可以在其他地方使用 target 属性来引用它width 和 height设置 iframe 的显示尺寸宽度和高度。frameborder控制框架的边框显示frameborder0 表示没有边框。scrolling指定框架内容的滚动方式yesnoauto。allowfullscreen允许 iframe 显示全屏内容。
例如
iframe srchttps://www.360.com nameexampleFrame width600 height400 frameborder0/iframe效果如下 可以看到360就被嵌到到我们的网页中了 通过 iframe 嵌套其他网页时可以结合 a 标签的 target 属性来实现点击链接时内容显示在特定的 iframe 中 例如
!-- 创建一个iframe框架名称为hello --
iframe src namehello width600 height400/iframe!-- 创建一个链接点击时在名为hello的iframe中打开360 --
a hrefhttps://www.360.com targethello点击跳转360/a效果如下 点击“点击跳转360”链接时百度的网页内容会在 iframe 框架内显示而不是打开新的标签页或窗口。这样整个页面的布局保持不变只有框架内的内容发生变化 表单 表单是网页中用于接收用户输入的主要方式可以用来提交数据到服务器。HTML 提供了多种表单元素如文本框、单选框、多选框、按钮、下拉框等来构建交互式的网页 form 是表单标签定义了表单的提交方式和目标地址。form的属性如下
action指定表单提交的数据将发送到哪里通常是一个 URL 地址。method定义提交数据的方式。常用的有两种 GET表单数据通过 URL 提交数据会显示在 URL 地址栏中。适用于数据量小、信息不敏感的场合。POST表单数据通过 HTTP 请求提交数据不会显示在 URL 地址栏中。适用于数据量大或者涉及敏感信息的情况如登录、上传文件等 表单元素 使用input标签可以创建表单元素在type属性中指定元素的类别比如文本框、单选框、多选框、按钮等 文本框 typetext 或 typepassword的时候表单为文本框用于让用户输入单行文本。当typepassword时会隐藏输入的字符 name指定输入框的名称服务器端使用该名称来获取表单数据value指定输入框的初始值maxlength定义最大字符数readonly使文本框为只读状态不能编辑disabled使文本框为禁用状态无法操作 例如 input typetext nameusername value初始值 maxlength50
input typepassword namepassword 效果如下 单选框 typeradio时表单为单选框用于选择一项内容
必须设置 name 属性所有同一组单选框的 name 属性应相同 name指定单选框的名称服务器端使用该名称来获取表单数据checked默认选中该单选框value定义单选框的值提交时使用该值 例如
input typeradio namegender valuemale 男
input typeradio namegender valuefemale checked 女
效果如下 多选框 typecheckbox时表单为多选框name 属性相同的多个复选框属于同一组 例如
input typecheckbox nameinterest valuemusic 音乐
input typecheckbox nameinterest valuesports checked 体育效果如下 按钮 typebutton普通按钮可用于执行 JavaScript 代码等typesubmit提交按钮点击时会提交表单数据typereset重置按钮点击时会清空表单的所有数据 下拉框 select 标签用于创建下拉列表里面包含多个 option 标签用户可以从中选择一项或多项 name指定下拉框的名称。option每个 option 标签代表下拉框中的一个选项。selected指定哪个选项为默认选中 例如 p国家select namecountryoption valuechina中国/optionoption valueus selected美国/option/select/p 效果如下 文本域和文件域 文本域用于多行文本输入通常用于评论、留言等
文本域的标签为textarea属性为
name指定文本域的名称cols 和 rows定义文本域的列数和行数 例如
textarea namemessage cols50 rows10这里是默认文本/textarea效果如下 文件域用于文件上传允许用户选择文件上传
使用文件域需要设置input的type为file即input typefile
例如
input typefile namefileupload
input typebutton value上传文件效果如下 表单验证 HTML5 提供了一些表单验证功能帮助我们在客户端进行基本的输入验证。
表单验证的实现是通过在表单中添加属性实现的 表单验证的属性包括
placeholder显示在输入框中的提示文本required指定该输入字段为必填项提交表单时如果该字段为空则浏览器会自动显示提示pattern定义输入的正则表达式用户输入的值必须匹配该表达式min 和 max指定输入值的最小值和最大值通常用于日期、数字输入框required确保输入框不能为空 例如
forminput typetext nameusername placeholder请输入用户名 requiredinput typepassword namepassword requiredinput typeemail nameemail pattern[a-z0-9._%-][a-z0-9.-]\.[a-z]{2,}$ placeholder请输入有效的邮箱地址input typesubmit value提交
/form效果如下
