河南宏业建设管理有限公司网站,wordpress启动广告,wordpress评论者名字,华为荣耀官网授课老师 #xff1a;陶国荣
联系方式 #xff1a; taogrtedu.cn
授课阶段 #xff1a; Web前端基础
授课内容 #xff1a; HTML CSS JavaScript 文章目录一、讲师和课程介绍二、Web前端介绍1. 什么是网页2. 网页的组成3. 网页的优势4. 开发前的准备三、 HTML语法介绍…授课老师 陶国荣
联系方式 taogrtedu.cn
授课阶段 Web前端基础
授课内容 HTML CSS JavaScript 文章目录一、讲师和课程介绍二、Web前端介绍1. 什么是网页2. 网页的组成3. 网页的优势4. 开发前的准备三、 HTML语法介绍1. HTML介绍2. 元素3. 使用四、常用标签介绍1. 基本结构解析2. body中常用标签3. 常用结构标签4. 标签分类5. 标签比较6. 标签间的转换6. 标签嵌套6. 标签嵌套一、讲师和课程介绍
详见附加的PPT文件。
二、Web前端介绍
1. 什么是网页
网页是基于浏览器的应用程序是数据展示的载体.
2. 网页的组成
浏览器 向服务器发送用户请求指令接收并解析数据展示给用户 服务器 存储数据处理并响应请求 协议 规范数据在传输过程中的打包方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YQaMGeS1-1678383686106)(assets\请求和响应0.png)]
3. 网页的优势
即时响应 更新服务端页面即完成更新客户端重新加载即兑现内容 无需安装和更新 无需安装任何应用软件只需要一个浏览器执行即可
4. 开发前的准备
运行环境浏览器设置chrome为默认浏览器作为网页文件的运行环境。调试工具浏览器自带的调试工具使用快捷键F12或右键检查打开。开发工具不限选用个人习惯的即可。Sublime、VSCode、EditPlus、Webstrom等
三、 HTML语法介绍
1. HTML介绍
超文本标记语言浏览器能够识别和解析的语言通过元素的形式构建页面结构和填充内容
2. 元素
元素也称为标记或标签用于在网页中标记内容 语法标签使用 为标志标签名不区分大小写推荐小写表示 分类 双标签成对出现包含开始标签和结束标签。例 html/html单标签只有开始标签没有结束标签可以手动添加“/”表示闭合。例 br
br/标签属性 标签属性书写在开始标签中使用空格与标签名隔开用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成属性值使用双引号表示。例 img srcimgs/img01.jpg同一个标签中可以添加若干组标签属性使用空格间隔。例 img srcimgs/img01.jpg width200px height200px3. 使用
创建网页文件使用.html或.htm作为文件后缀。添加网页的基本结构!doctype html
htmlheadtitle网页标题/titlemeta charsetutf-8/headbody网页主体内容/body
/htmlHTML语法规范 标签名不区分大小写建议使用小写。注释语法 !-- 此处为注释 --四、常用标签介绍
1. 基本结构解析
!-- 文档类型声明便于浏览器正确解析标签及渲染样式 --
!doctype html
!-- HTML文档开始的标志 --
html !-- 头部设置可在head中设置网页标题引入外部的资源文件 --head!-- 设置网页标题显示在网页选项卡上方 --title网页标题/title!-- 设置网页字符编码 --meta charsetutf-8 /head!-- 网页主体部分显示网页主要内容 --body 网页主体内容/body
/html!-- 文档结束--[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v98aCUSF-1678383686108)(assets\HTML结构1.jpg)]
2. body中常用标签 文本标签 标题标签自带加粗效果从h1到h6字体大小逐级递减 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6段落标签 p段落文本/p普通文本标签 b加粗标签/b
strong强调标签效果同b标签/strong
i斜体标签/i
u删除线标签/u
span行分区标签用于对特殊文本特殊处理/span
label普通文本标签常与表单控件结合实现文本与控件的绑定/label换行标签 浏览器会忽略代码中的换行和空格只显示为一个空格。想要实现页面中的换行需要借助于换行标签。 br水平线标签在页面中插入一条水平分割线 hr字符实体 某些情况下浏览器会将一些特殊字符按照 HTML 的方式解析影响显示结果。此时需要将这类字符转换为其他的形式书写。 例 使用 lt; 在页面中呈现 使用 gt; 在页面中呈现 使用 nbsp; 在页面中呈现一个空格使用 copy; 在页面中呈现版权符号©使用 yen; 在页面中呈现人民币符号容器标签 常用于页面结构划分结合CSS实现 divcss 网页布局 div idtop页面顶部区域/div
div idmain页面主体区域/div
div idbottom页面底部区域/div图片与超链接标签(内联 / 块 标签) 图片标签 用于在网页中插入一张图片。 属性 src 用于给出图片的URL必填。属性 width/height 用于设置图片尺寸取像素值默认按照图片的原始尺寸显示。属性 title 用于设置图片标题鼠标悬停在图片上时显示属性 alt 用于设置图片加载失败后的提示文本 语法 img src width height title alt超链接标签用户可以点击超链接实现跳转至其他页面 属性 href 用于设置目标文件的URL必填。属性 target用于设置目标文件的打开方式默认在当前窗口打开。可以设置新建窗口打开目标文本(取_blank)属性href也可以指向某个id号属性的标签 a hrefhttp://www.taobao.com target_self淘宝/a
a hrefhttp://www.baidu.com target_blank百度/a3. 常用结构标签 列表标签 无序列表 默认用实心圆点标识列表项 ullilist item 列表项/li lilist item 列表项/lililist item 列表项/li
/ul有序列表 默认使使用阿拉伯数字标识每条数据可以使用start属性设置起始的值默认为1 ollilist item 列表项/li lilist item 列表项/lililist item 列表项/li/ol列表嵌套 在已有列表中嵌套添加另一个列表常见于下拉菜单 olli西游记ulli孙悟空/lili孙悟空/lili孙悟空/li/ul/li
/ol表格标签 表格由行和单元格组成常用于直接的数据展示或辅助排版基本结构如下 !-- 创建表格标签 --
table!-- 创建行标签 --tr!-- 行中创建单元格以显示数据 --td姓名/tdtd年龄/tdtd班级/td/trtrtd张三/tdtd20/tdtd一(1)班/td/tr
/table单元格合并用于调整表格结构分为跨行合并和跨列合并合并之后需要删除被合并的单元格保证表格结构完整。 单元格属性作用取值colspan跨列合并单元格无单位数值rowspan跨行合并单元格无单位数值 合并示例代码 table border1trth姓名/thtd李小明/td/trtrth rowspan2电话/thtd010-1234567/td/trtrtd13912321213/td/tr
/tabletable border1trth姓名/thth colspan2电话/th/trtrtd李小明/tdtd010-1234567/tdtd13912321213/td/tr
/table表单标签 表单用于采集用户的信息并提交给服务器由表单标签和表单控件组成。表单标签form负责提交数据给服务器表单控件负责收集数据。 表单使用 | 属性名 | 取值 | | -------- | ------------------------------------------------------------ | | action | 设置数据的提交地址 | | method | 设置数据的提交方式默认为get方式可以设置为post | | onsubmit | 设置表单数据提交时的触发事件的执行函数事件绑定中详细介绍 | 例如 form action method onsubmit!--此处为表单控件--
/form表单控件使用重点 表单控件用于采集用户信息可设置以下标签属性 属性名取值type设置控件类型name设置控件名称最终与值一并发送给服务器value设置控件的值placeholder设置输入框中的提示文本maxlength设置输入框中可输入的最大字符数checked设置单选按钮或复选按钮的默认选中selected设置下拉菜单的默认选中
4. 标签分类 块标签 独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致 例 : body div h1~h6 p ul ol li form table(默认尺寸由内容决定) 行内标签 可以与其他标签共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a 行内块标签 可以与其他标签共行显示,又能手动调整宽高 例 : img input button (表单控件) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5ZhVtQi-1678383686110)(assets\元素总结2.png)]
5. 标签比较
行内标签的特征
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXFhBcfd-1678383686111)(assets\元素总结3.png)]
块标签特征
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K1LKOF7V-1678383686112)(assets\元素总结4.png)]
6. 标签间的转换 内联标签如何转成块元素 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XnDMSBbu-1678383686113)(assets\SNAGHTML34d45a.PNG)] 块标签如何转成内联元素 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQVXB6Fp-1678383686114)(assets\SNAGHTML3b8eb4.PNG)]
6. 标签嵌套
块标签中可以嵌套任意类型的标签 p 标签除外段落标签只能嵌套行内标签不能嵌套块标签行内标签中最好只嵌套行内或行内块标签标签嵌套 在双标签中书写其他标签称为标签嵌套 嵌套结构中外层标签称为父标签内层标签称为子标签。多层嵌套结构中所有外层标签统称为祖先标签内层标签统称为后代标签。平级结构互为兄弟标签。
签如何转成块元素
[外链图片转存中...(img-XnDMSBbu-1678383686113)]2. 块标签如何转成内联元素[外链图片转存中...(img-TQVXB6Fp-1678383686114)]6. 标签嵌套
块标签中可以嵌套任意类型的标签 p 标签除外段落标签只能嵌套行内标签不能嵌套块标签行内标签中最好只嵌套行内或行内块标签标签嵌套 在双标签中书写其他标签称为标签嵌套 嵌套结构中外层标签称为父标签内层标签称为子标签。多层嵌套结构中所有外层标签统称为祖先标签内层标签统称为后代标签。平级结构互为兄弟标签。
