1+X初级 Web页面制作基础
第一篇 Web页面制作基础
排版不太好，如果要Word版本，请添加群聊获取
第一章 HTML标签介绍
•HTML 标签是由<>包围的关键词，例：
•HTML 标签通常成对出现，分为标签开头和标签结尾，例：
•有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾，例：
•页面中所有的内容，都要放在HTML标签中
•HTML标签主题分为三个部分
–标签名称
–标签内容
–标签属性
•HTML 标签具有语义化
–语义化：就是仅通过标签名就能判断出该标签的内容。
–语义化的作用
•网页结构层次更清晰。
•更容易被搜索引擎收录。
•更容易让屏幕阅读器读出网页内容。
•标签的内容就是在一对标签内部的内容
•标签的内容可以是其他标签
第二节 标签（元素）全局标准属性
在HTML规范中，规定了8个全局标准属性：
class属性
•用于定义元素的类名。
id属性
•用于指定元素的唯一id
•要注意该属性的值在整个HTML文档中要具有唯一性
style属性
•用于指定元素的行内样式
•使用该属性后将会覆盖任何全局的样式设定
title属性
•用于指定元素的额外信息
accesskey属性
•用于指定激活元素（获得焦点）的快捷键。
tabindex属性
•用于指定元素在tab键下的次序
dir属性
•用于指定元素中内容的文本方向
•属性值只有ltr或rtl两种，含义分别是left to right和right to left。
lang属性
•用于指定元素内容的语言
第三节 HTML的全局事件属性
Window窗口事件
•onload：在页面加载结束之后触发。
•onunload：在用户从页面离开时发生，例如点击跳转，页面重载，关闭浏览器窗口等。
Form表单事件
•onblur：当元素失去焦点时触发。
•onchange：在元素的元素值被改变时触发。
•onfocus：当元素获得焦点时触发。
•onreset：当表单中的重置按钮被点击时触发。
•onselest：在元素中文本被选中后触发。
•onsubmit：在提交表单时触发。
Keyboard键盘事件
•onkeydown：在用户按下按键时触发。
•onkeypress：在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有：ALT、CTRL、SHIFT、ESC
•onkeyup：当用户释放按键时触发。
Mouse鼠标事件
•onclick：当在元素上发生鼠标点击时触发。
•onblclick：当在元素上发生鼠标双击时触发。
•onmousedown：当在元素上按下鼠标按钮时触发。
•onmousemove：当鼠标指针移动到元素上时触发。
•onmouseout：当鼠标指针移出元素时触发。
•onmouseover：当鼠标指针移动到元素上时触发。
•onmouseup：当在元素上释放鼠标按钮时触发。
•Media媒体事件
•onabort：当退出时触发。
•onwaiting：当媒体已停止播放但打算继续播放时触发。
第二章 HTML的标签（元素）
第一节 文本标签
段落标签
段落标签用来描述一段文字
标题标签
•标题标签用来描述一个标题
•标题标签总共有六个级别，由高到低分别是h1,h2,h3,h4,h5,h6
• 标签在每个页面中通常只出现一次
强调语句标签
用于强调某些文字的重要性
更加强调标签
和 标签一样，用于强调文本，但它强调的程度更强一些
无语义标签
标签是没有语义。
短文本引用标签
简短文字的引用。
长文本引用标签
定义长的文本引用
换行标签
标签作用相当于word文档中的回车,起到文字换行的作用
第二节 多媒体标签
链接标签
图片标签
视频标签
•
•目前video支持三种视频格式
–Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
–MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
–WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
音频标签
第三节 列表
无序列表标签
•ul-li是没有前后顺序的信息列表
•
- 列表定义一个无序列表
• - 代表无需列表中的每一个元素
- HTML
- CSS
- JavaScript
有序列表ol-li列表默认情况下，每个li在浏览器中都会显示一个数字，代表自己的序号 定义列表•定义列表通常和和
- 标签一起使用 •定义列表中的项目 •
- 描述列表中的项目
-
- 学习WEB前段需要掌握哪三种语言
- 需要掌握HTML，搭建网页结构
- 需要掌握CSS，用于修改网页结构的样式
- 需要掌握JavaScript，用于用户和计算机交互
第四节 表格 表格标签表格的一行 有几对tr, 表格就有几行。 表格的表头 表格的头部的一个单元格，表格表头。 单元格 •表格的一个单元格，一行中包含几对，说明一行中就有几列。
姓名 性别 年龄 张三 男 25 小花 女 23 李四 男 28 表格合并 •同一行内，合并几列colspan=“2” •同一列内，合并几行rowspan="3" • 第五节 表单标签系列 表单标签 •表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 • •action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php) •method ： 数据传送的方式（get/post） 输入标签 input是最重要的表单标签，重要属性包括： •name：为文本框命名，用于提交表单，后台接收数据用。 •value：为文本输入框设置默认值。(一般起到提示作用) •type：通过定义不同的type类型，input的功能有所不同（见下表） • type 功能说明 text 单行文本输入框 password 密码输入框（密码显示为***) radio 单选框 （checked属性用于显示选中状态） checkbox 复选框（checked属性用于显示选中状态） file 上传文件 button 普通按钮 reset 重置按钮（点击按钮，会触发form表单的reset事件） submit 提交按钮（点击按钮，会吃饭form表单的submit事件） email 专门用于输入 e-mail url 专门用于输入 url number 专门用于number range 显示为滑动条，用于输入一定范围内的值 date 选取日期和时间（还包含：month、week、time、datetime、datetime-local） color 选取颜色 按钮 button标签的功能与按钮功能相同，button是双标签，内部可以嵌套其他行内元素。 下拉选择框 看书 旅游 运动 购物 •选项是下拉选择框里面的每一个选项 •selected：当某个option选项有这个属性时候，select默认选中这个选项 文本域 •当用户想输入大量文字的时候，使用文本域 •cols ：多行输入域的列数。 •rows ：多行输入域的行数 第六节 其他语义化标签 盒子•俗称为盒子，division（分割） •在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
标签中，这个标签的作用就相当于一个容器。 •什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。 网页头部•HTML5新增语义化标签，定义网页的头部 •主要用于布局，分割页面的结构 底部信息•HTML5新增语义化标签，定义网页的底部 •主要用于布局，分割页面的结构 导航•HTML5新增语义化标签，定义一个导航 •主要用于布局，分割页面的结构 文章
http://www.taodudu.cc/news/show-3896165.html相关文章：
- 用python的flask框架制作可在局域网内访问的静态网站
- vscode 主题的颜色定制
- 网页设计与制作2.0
- 网页设计与制作2
- python: 从函数了解到装饰器
- 一份来自 StackOverflow 的最佳 Python 装饰器教程
- 人人都能看懂的 Python 装饰器入门教程！
- 用python制作一个英语单词听写器
- 网页制作3
- java设计模式（结构）--组合模式装饰器模式
- Python 自制简单实用的日志装饰器
- 18.高级函数(闭包与装饰器)
- 如何理解 Python 装饰器
- 计算机专业刊头,用Word 2000制作小报
- Word表格跨页重复显示标题行
- word表格重复标题行失效的解决方法
- 【问题处理】Word表格跨页重复显示标题行失败问题解决
- word中用VBA实现所有表格标题行重复
- Office 2019 Word表格无法跨页重复标题行
- ms office word2013教程 - 表格中重复标题行失效解决
- WPS表格打印-标题行重复
- python csv模块 防止重复写入标题
- python爬虫：去掉重复的URL（爬取博客园中每页标题和url）
- 帆软制作报表，让标题行在翻页时仍然存在
- POI设置word表格的行在各页顶端以标题形式重复出现
- word 2010 标题行重复设置方法及表格标题行无法重复显示问题的解决方法
- python标题行_如何在python datafram中更改标题行
- 帆软FineReport_重复、冻结标题行
- RDLC 设置表的重复标题行（在每页中显示标题行）
- html表格自动跨页,如何让表格跨页自动重复标题行?
- 列表定义一个无序列表
1+X初级 Web页面制作基础相关推荐
- web页面制作基础（部分重要知识总结）
一.html 1.标签 是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的.具体在html中的变现形式 由 < > 括起来的对象 比如: html hea ...
- Web页面制作基础总结
一.html中的标签及其属性 标签 标签是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的.通常,我们也会将标签称作元素.具体在html中的变化形式由<>括 ...
- 移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
- 微信小程序与web页面制作的区别
前言 最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...
- 移动端也能兼容的web页面制作1：MDBootstrap演示Demo运行演示
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
- web页面制作-环游记（一）
url:http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html (如果打开过慢,或者打不开,原因你懂得.) 一. ...
- 【Web网页制作】影视主题网页制作web页面开发（附源码）
[写在前面] 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢. ...
- 小tip: base64:URL背景图片与web页面性能优化（转载）
今天在代码看到css北京图片使用了base64格式表示图片,SO,百度了一下.感觉完全可以解释了. 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在H ...
- 小tip: base64:URL背景图片与web页面性能优化——张鑫旭
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
最新文章
- VS2017桌面应用程序打包成.msi或者.exe
- pcie组raid linux,PCIe 4.0有多强大？组RAID 0阵列之后惊呆了
- ensp中小型企业网配置_如何构建1000人规模的网络，详细配置？
- 如何解决This system is not registered with RHN.
- Haar特征计算过程【DataWhale学习记录】
- 最优化内外点法matlab实现
- Problem C: 复数类的流输入输出
- 怎么在运行上面看域名服务器,域名dns服务器查询方法是什么？如何查看dns服务器地址...
- [DZ X2.5实用教程] DZ X2.5(Discuz!)论坛-QQ企业OR域名邮箱作为发信邮箱设置教程
- Ubuntu 22.04 桌面美化之Mac Big Sur风格
- Android开发——实现数字时钟
- 超级好看又易上手教你用python画樱花
- 币小秘：这些年，见过的带单老师们，这里有没有你踩过的坑？
- 关于原创文章特此说明
- 1062 最简分数（JAVA）
- [网络安全学习篇50]：Web架构安全分析
- RTX：邮件提醒插件分享经验
- 一个工具教你制作PPT
- 备孕、怀孕、产子、月子知识大全
- 程序员面试用TXT文档写出纸牌接龙，HR当场月薪18K聘请，还能有这种骚操作？...