给百度做网站的公司,北京最有名的广告公司有哪些,哪个网站可以直接做ppt,wordpress主题企业HTML 揭秘#xff1a;HTML 编码快速入门 一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键 五 . 基础标签5.1 字体标签5.1.1 col… HTML 揭秘HTML 编码快速入门 一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键 五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性 5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.7 小结 六 . 其他标签6.1 图片、音频、视频标签6.1.1 图片标签src 属性width 和 height 属性alt 属性 6.1.2 音频标签6.1.3 视频标签6.1.4 小结 6.2 超链接标签6.3 列表标签6.4 表格标签案例 1 : 基础实现案例 2 : 跨行表格案例 3 : 跨列表格 6.5 布局标签6.6 表单标签6.6.1 表单标签6.6.2 表单标签 - 表单项input 标签select 标签textarea 文本输入框label 标签 这篇文章会带您快速了解前端开发的核心技术重点探讨HTML的基础知识和应用。从HTML文件的创建到文本、图片的添加再到使用VSCode提高开发效率文章逐步引导您掌握前端开发的基础。通过实例和练习我们会学习如何使用HTML标签构建网页为进一步的前端学习打下坚实基础。 如果你觉得此专栏对你有帮助的话 , 还可以订阅一下此专栏 https://blog.csdn.net/m0_53117341/category_12778663.html 一 . 前端知识介绍
相关学习网站 :
https://www.w3school.com.cn/html/html_jianjie.asp
w3cschool菜鸟教程20141021.CHM 二 . HTML 介绍
HTML 的应用场景 : 各大门户网站的网页都是由 HTML 编写的 网站 后台 前端网页 , 网站是包括网页的 比如 : 京东的主页就可以发现 HTML 的踪影 HTML 是一门语言 , 所有的网页都是用 HTML 这门语言编写出来的
HTML (HyperText Markup Language) : 超文本标记语言
超文本 : 超越了文本的限制 , 比普通文本更强大 . 除了文字信息 , 还可以定义图片、音频、视频等内容标记语言 : 由标签构成的语言
HTML 运行在浏览器上 , HTML 标签由浏览器来解析 , 不需要编译
HTML 标签都是预定义好的 , 例如 : 使用 展示图片
在任何地方都可以创建 HTML 文件 , 文件后缀名是 .html 或者 .htm
W3C 标准 : 网页主要由三部分组成
结构 : HTML - 人的骨骼表现 : CSS - 化妆师行为 : JavaScript - 能歌善舞
三 . HTML 快速入门
第一步 : 新建文本文件 , 后缀名改为 .html 第二步 : 编写 HTML 结构标签
!-- 根标签 --
html!-- 头标签 --head....../head!-- 体标签 --body....../body
/html我们也可以看到 , 京东的官网最基本的框架也是这个样子 第三步 : 在 中添加文字
!-- 根标签 --
html!-- 头标签 --head!-- 网页标题标签 --titleThe First HTML/title/head!-- 体标签 --body!-- px 属于前端的一种单位 - 像素 --!-- font 表示设置字体 --font colorred size7pxHello World/font/body
/html第四步 : 测试
我们双击刚才创建的 HTML 文件 我们可以看到他们之间的对应关系 小结 :
HTML 文件以 .htm 或者 .html 为扩展名HTML 结构标签
标签描述定义 HTML 文档定义关于文档的信息定义文档的标题定义文档的主体
HTML 标签不区分大小写 , 推荐使用小写HTML 标签的属性值 , 使用单引号 、双引号都可以 , 推荐使用单引号 四 . HTML 编辑器 - VSCode
VSCode 的官网如下 : https://code.visualstudio.com/
VSCode : VSCodeUserSetup-x64-1.70.2.zip
WebStorm : WebStorm-2024.1.zipCrack.zip
VSCode (Visual Studio Code) 是由微软研发的一款免费、开源的跨平台文本 (代码) 编辑器 , 是目前前端开发最常用的软件开发工具之一 .
4.1 插件安装
中文插件 : 搜索 Chinese 我之前已经安装过中文插件了 , 所以这里显示的是卸载 . 浏览器查看插件 : 搜索 Open Browser Preview Vue 脚手架提示 : 搜索 vetur 自动修改标签对插件 : Auto Rename Tag 4.2 修改主题配色 4.3 修改快捷键
我们之前在 IDEA 中格式化代码是 Ctrl Alt L , 但是 VSCode 的快捷键跟 IDEA 是不同的 , 很不顺手 , 我们也可以修改一下 . 4.4 设置自动保存 4.5 创建 HTML 文件
我们需要在硬盘中提前创建一个文件夹 , 然后用 VSCode 打开这个文件夹 我们可以继续创建文件夹 接下来就可以在刚创建出来的文件夹下 , 新建一个 HTML 文件 4.5 书写 HTML 代码
我们直接输入一个 ! , 就会自动创建出 HTML 的框架 然后依然通过 Ctrl / 添加注释
我们来对 VSCode 生成的代码分析一下
!-- 表示当前文档类型是 HTML --
!DOCTYPE html
!-- 表示当前 HTML 文档使用的语言是英文, 当然也可以编写中文 --
html langen
!-- 头标签 --
head!-- 告知浏览器对该页面中的中文使用 UTF-8 编码 --meta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!-- 网页标题 --title在 VSCode 中编写网页/title
/head
bodyfont colorblue size7pxHello World/font
/body
/html然后右键 , 点击 Preview In Default Browser , 就可以打开电脑的默认浏览器了 4.6 常见快捷键
Ctrl 加号键 : 放大
Ctrl 减号键 : 减小
Ctrl b : 显示 / 隐藏左侧边栏
五 . 基础标签 我们演示几个常见的标签
5.1 字体标签
5.1.1 color 属性
color 属性有两种设置方式 :
使用英文单词使用十六进制
英文单词 :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- font 字体标签 --!-- font 标签常见属性 --!-- 1. color: 表示字体颜色, 颜色值有两种设置方式 --!-- (1) 使用英文单词 --font colorblue字体颜色测试/fontfont colorred字体颜色测试/fontfont coloryellow字体颜色测试/font
/body
/html十六进制 : 十六进制的表示通过 RGB (Red Green Blue) 来表示
其中 #RGB 的具体写法是这个样子的 #000000 , 每组有两个数字 , 数字范围是 0-F .
比如 : 红色 - #FF0000 , 绿色 - #00FF00 , 蓝色 - #0000FF 如果每两组的数字是一致的 , 那只需要书写一个数字即可 , 比如 : 红色 - #F00 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 利用 RGB 表示红色 --font color#FF0000红色测试/font!-- 利用 RGB 表示蓝色 --font color#0000FF蓝色测试/font!-- 如果每两组的数字是一致的 , 那只需要书写一个数字即可 --font color#F00红色缩写/fontfont color#00F蓝色缩写/font
/body
/html5.1.2 size 属性
size 属性表示字体大小 , 默认取值是 1-7 , 依次递增 .
如果超过 7 , 那就按照 7 显示 . 如果小于 1 , 就按照 1 显示 .
在 HTML 中 , px 单位可以不加 , 但是不推荐 .
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- size 的取值范围在 1-7 之间 --font size1px测试 size 属性/fontfont size7px测试 size 属性/font!-- 如果超过 7 , 那就按照 7 显示 . --font size77px如果超过 7 , 那就按照 7 显示 ./font!-- 如果小于 1 , 就按照 1 显示 . --font size-77px如果小于 1 , 就按照 1 显示 ./font!-- 在 HTML 中 , px 单位可以不加 , 但是不推荐 . --font size5建议加上 px/font/body
/html5.1.3 face 属性
face 属性指的是字体样式 , 比如我们可以设置宋体、黑体、楷体等等
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 将字体设置成宋体 --font size7px face宋体宋体/font!-- 将字体设置成黑体 --font size7px face黑体黑体/font!-- 将字体设置成楷体 --font size7px face楷体楷体/font/body
/html5.2 i 标签、b 标签
i 标签是倾斜的效果 , b 标签是加粗的效果 .
他们之间还可以嵌套 , 达到既加粗又倾斜的效果 .
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyi倾斜/ib加粗/b!-- i 标签和 b 标签可以互相嵌套 --ib倾斜加粗/b/ibi加粗倾斜/i/b
/body
/html5.3 hr 标签
hr 标签的效果就是一条水平线 , 他是一个单标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyi倾斜/i!-- 水平线 --hrb加粗/bhr!-- i 标签和 b 标签可以互相嵌套 --ib倾斜加粗/b/ibi加粗倾斜/i/b
/body
/html5.4 br 标签
br 标签的效果就是起到换行的作用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyfont size7px colorblue我是大帅哥/font!-- 换行符 --brfont size1px colorblack骗你的/font
/body
/html5.5 center 标签
center 标签的作用是让文本进行居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body不居中!-- 居中标签 --center居中/center
/body
/html5.6 练习
我们想要达到的效果是这个样子的 那素材也给大家放到这里了
在神奇的世界里精灵宝可梦是一群独特而神奇的生物它们来自于大自然的各个角落拥有各种各样的形态和能力。每一个精灵宝可梦都有着自己独特的特征和故事它们可能是火焰般的热情也可能是清风般的温柔甚至还有一些神秘的宝可梦隐藏在深邃的森林或幽暗的洞穴中。在人类与精灵宝可梦的相遇中我们发现了无限的可能性和惊喜。有些精灵宝可梦与人类成为了亲密的伙伴彼此相互依赖、相互成长有些精灵宝可梦成为了人类的挑战者它们在战斗场上展现着无与伦比的力量与智慧还有一些精灵宝可梦以它们独特的魅力和美丽吸引着人类的目光成为了大家心中的偶像和梦想。无论是在梦幻的大陆上还是在遥远的星空中精灵宝可梦都是一个充满奇迹和冒险的世界。让我们一起踏上这段神奇的旅程去探索、去发现与精灵宝可梦们一同创造属于我们自己的精彩故事我们接下来一步一步看
第一部分 : 标题部分
标题部分我们使用 h1 标签即可 , 他会自动加粗并换行 第二部分 : 水平线部分
水平线我们可以用 hr 标签 , hr 标签同样可以指定颜色等属性 第三部分 : 正文
正文是分为三个部分的 , 所以我们需要用到 p 标签 , p 标签每个段落之间是具有留白的 . 那每个 p 标签中 , 还有一些内容需要显示成红色以及加粗操作 . 第四部分 : 水平线部分
水平线依然使用 hr 标签即可 , 指定 color 属性 第五部分 : 版权所有
这一部分需要我们将版权信息进行居中 , 使用 center 标签即可
另外 , 在这一部分 , 出现了一个 © 标识 , 这个标识代表版权标签 , 在 HTML 中叫做特殊符号 .
特殊符号以 开始 , 以 ; 结尾 .
常见的特殊符号 :
特殊符号意义小于号大于号©版权符号 ©¥人民币符号 ¥ 符号‘’ 引号®已注册符号 ®™商标符号 ™ 不断行的空格 那整体的代码如下 :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- h1 标签: 一级标题 --h1精灵宝可梦简介/h1!-- hr 标签: 水平线, 也可以设置颜色等属性 --hr coloryellow!-- p 标签: 段落标签, 带留白 --p!-- font 标签: 可以设置字体的颜色、大小、字体 --font colorred在神奇的世界里精灵宝可梦是一群独特而神奇的生物它们来自于大自然的各个角落拥有各种各样的形态和能力。/font每一个精灵宝可梦都有着自己独特的特征和故事它们可能是火焰般的热情也可能是清风般的温柔甚至还有一些神秘的宝可梦隐藏在深邃的森林或幽暗的洞穴中。/pp在人类与精灵宝可梦的相遇中我们发现了无限的可能性和惊喜。有些精灵宝可梦与人类成为了亲密的伙伴彼此相互依赖、相互成长!-- b 标签: 加粗 --有些精灵宝可梦成为了人类的挑战者b它们在战斗场上展现着无与伦比的力量与智慧/b还有一些精灵宝可梦以它们独特的魅力和美丽吸引着人类的目光成为了大家心中的偶像和梦想。/pp无论是在梦幻的大陆上还是在遥远的星空中精灵宝可梦都是一个充满奇迹和冒险的世界。b让我们一起踏上这段神奇的旅程去探索、去发现与精灵宝可梦们一同创造属于我们自己的精彩故事/b/phr coloryellow!-- center 标签: 水平居中 --center精灵宝可梦公司所有/center!-- 特殊符号: 以 开始, 以 ; 结束 --center版权所有copy;: 精灵宝可梦/center
/body
/html最终实现的效果如下 5.7 小结
标签作用h1~h6标题标签font字体标签b粗体标签i斜体标签u文本下划线标签center文本居中标签p段落标签br换行标签hr水平线标签
六 . 其他标签
6.1 图片、音频、视频标签
首先 , 我们需要准备一些素材 将新的文件夹命名为 material
然后将图片、音频、视频都引入到这个文件夹下 素材大家可以自行准备 6.1.1 图片标签
我们通过 img 标签引入图片 , img 标签的常见属性如下
src 属性
src 属性表示引入图片的路径 , 其中 .. 表示当前页面的上一级目录 , 即父目录
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 使用 img 标签引入图片 --!-- src 表示引入图片的路径 (1) .. 在这里表示当前页面 demo03.html 的上一级目录, 即 2024_03_19_FRONTDEMO(2) ../material/祝尼魔小屋布局.png 表示先找到当前文件的父目录 2024_03_19_FRONTDEMO, 然后在查找父目录下面的 material 目录, 最后找到 material 目录下面的 祝尼魔小屋布局.png--img src../material/祝尼魔小屋布局.png alt
/body
/htmlwidth 和 height 属性
width 属性表示宽度 , height 属性表示高度 .
这两个属性的单位是 px , 单位还可以用百分比表示 , 是相对于当前页面的 .
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 使用 img 标签引入图片 --!-- height 表示高度, width 表示宽度单位: px, 也可以用百分比来表示--img src../material/祝尼魔小屋布局.png height500px width50%
/body
/htmlalt 属性
alt 属性表示在图片加载失败之后所显示的内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 使用 img 标签引入图片 --!-- alt 属性表示图片丢失后所显示的文字 --img src../material/error.png alt这里原来是祝尼魔小屋
/body
/html6.1.2 音频标签
音频标签跟图片标签一样 , 需要指定文件的路径
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 音频 audio 标签 --audio src../material/掉了 - 张惠妹.mp3/audio
/body
/html我们看一下效果 , 什么都没有 . 这是因为我们的 audio 标签和 video 标签必须添加 controls 控件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 音频 audio 标签 --!-- controlscontrols 属性表示音频的播放控件, 必须添加 --!-- 可以直接写成 controls --audio src../material/掉了 - 张惠妹.mp3 controlscontrols/audio
/body
/html6.1.3 视频标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 视频 video 标签 --!-- controlscontrols 属性表示视频的播放控件, 必须添加 --!-- 可以直接写成 controls --video src../material/background.MOV controls/video
/body
/html我们可以修改一下尺寸
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 视频 video 标签 --!-- controlscontrols 属性表示音频的播放控件, 必须添加 --!-- 可以直接写成 controls --video src../material/background.MOV controls width50% height500px/video
/body
/html6.1.4 小结
图片、音频、视频标签 其中 , 音频标签和视频标签必须添加 controls 控件 .
尺寸单位 : px 和 %
6.2 超链接标签
a 标签它是用来定义超链接的 , 主要用于链接到另一个资源
href : 指定访问资源的 URLtarget : 指定打开资源的方式 _self : 默认值 , 在当前页面打开_blank : 在空白页面打开
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body!-- 超链接标签: a 标签, 可以实现页面跳转 --!-- 1. href 表示要跳转的地址2. 默认情况下会覆盖当前窗口--a hrefhttp://www.baidu.com访问百度/abr!--target_self 表示要跳转的网页会覆盖当前窗口, 不添加 target 属性就是覆盖旧的窗口target_blank 表示要跳转的网页会在新窗口打开--a hrefhttp://www.baidu.com target_self覆盖当前窗口/abra hrefhttp://www.baidu.com target_blank打开新的窗口/a
/body
/html我们可以看一下效果 6.3 列表标签
列表分为有序列表 (order list) 以及无序列表 (unorder list) li 标签必须搭配 ol 或者 ul 标签使用 其中 , 列表标签还具有一个属性 : type 属性 , 他表示设置项目符号的样式
我们可以通过代码来看一下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 列表标签 --!-- 有序列表: 快捷键 olli*3--olli毛阿敏/lili郑爽/lili许晴/li/ol!-- 无序列表: 快捷键 ulli*3--ulli毛阿敏/lili郑爽/lili许晴/li/ul
/body
/htmlWebStorm 通过 olli*3 然后按 Tab 键生成 其中 , ol、ul、li 标签上都具有一个 type 属性 , 表示当前列表类型 .
我们一般将 type 属性书写在 ol 或者 ul 上面 , 这样的话内部的所有 li 标签都能起到作用 .
其中 , 有序列表总共有 5 种效果 1 默认值aAiI
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- ol 中 type 的类型:1. 1 默认值2. a3. A4. i5. I--ol type1li张三/lili李四/lili王二麻子/li/olol typeali张三/lili李四/lili王二麻子/li/olol typeAli张三/lili李四/lili王二麻子/li/olol typeili张三/lili李四/lili王二麻子/li/olol typeIli张三/lili李四/lili王二麻子/li/ol
/body
/html无序列表总共有 3 种效果
circle : 空心圆disc : 实心圆 , 默认值square : 实心方形
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- ul 中 type 的类型:1. circle: 空心圆2. disc: 实心圆, 默认值3. square: 实心方形--ul typecircleli张三/lili李四/lili王二麻子/li/ulul typediscli张三/lili李四/lili王二麻子/li/ulul typesquareli张三/lili李四/lili王二麻子/li/ul
/body
/html如果只作用 li 标签的话 , 那么就只能针对某个 li 标签来实现效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- ul 中 type 的类型:1. circle: 空心圆2. disc: 实心圆, 默认值3. square: 实心方形--ul typecircle!-- 如果只作用 li 标签的话 , 那么就只能针对某个 li 标签来实现效果 --li typedisc张三/lili李四/lili王二麻子/li/ul/body
/html6.4 表格标签
table 标签是用来定义表格的
border : 规定表格边框的厚度width : 规定表格的宽度height : 规定表格的高度cellspacing : 规定单元格之间的空白距离cellpadding : 规定单元格边沿与内容之间的空白距离 其中 , tr 标签用来定义行
align : 定义表格行的内容对齐方式 , 取值 : left (左)、right (右)、center (居中)
td 标签用来定义列
rowspan : 规定单元格可横跨的行数 (合并行)colspan : 规定单元格可横跨的列数 (合并列)align : 定义表格行的内容对齐方式 , 取值 : left (左)、right (右)、center (居中)
th 标签可以作为表头进行展示 , 自动居中对齐、加粗处理
案例 1 : 基础实现
我们可以实现一个这样的表格 首先 , 先搭建出整体的框架
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*4td*4 --table!-- 第一行 --trtd序号/tdtd品牌 logo/tdtd品牌名称/tdtd企业名称/td/tr!-- 第二行 --trtd010/tdtdimg src../material/三只松鼠.png/tdtd三只松鼠/tdtd三只松鼠/td/tr!-- 第三行 --trtd009/tdtdimg src../material/优衣库.png/tdtd优衣库/tdtd优衣库/td/tr!-- 第四行 --trtd008/tdtdimg src../material/小米.png/tdtd小米/tdtd小米科技有限公司/td/tr/table
/body
/html那接下来 , 我们就需要调整一下样式了 .
首先 , 我们修改一下图片的大小 然后我们发现 , 目前是没有边框的 , 所以我们还需要将边框样式展现出来 但是目前单元格之间是有空隙的 , 所以我们还要继续设置 那接下来 , 我们就需要让表头位置加深加粗 将 tr 标签内的标签修改成 th , 即可自动实现加深加粗并且居中的效果 . 那接下来 , 将整个表变得宽一些 最后 , 我们让所有元素居中即可 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*5td*4 --table border1px cellspacing0px width50% centercenter!-- 第一行 --trth序号/thth品牌 logo/thth品牌名称/thth企业名称/th/tr!-- 第二行 --tr aligncentertd010/tdtdimg src../material/三只松鼠.png height40px width40px/tdtd三只松鼠/tdtd三只松鼠/td/tr!-- 第三行 --tr aligncentertd009/tdtdimg src../material/优衣库.png height40px width40px/tdtd优衣库/tdtd优衣库/td/tr!-- 第四行 --tr aligncentertd008/tdtdimg src../material/小米.png height40px width40px/tdtd小米/tdtd小米科技有限公司/td/tr/table
/body
/html案例 2 : 跨行表格
我们需要将姓名列的第二行和第三行进行合并 , 达到这样的效果 首先 , 我们还是搭建出最基础的表结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*4td*2 --!-- border1px 设置表格边框cellspacing0px 设置单元格之间紧密相接--table border1px cellspacing0px!-- 第一行 --tr!-- 表头需要用 th 实现 --th姓名/thth手机号/th/tr!-- 第二行 --trtd张三/tdtd13800000000/td/tr!-- 第三行 --trtd张三/tdtd13800000001/td/tr!-- 第四行 --trtd李四/tdtd13900000000/td/tr/table
/body
/html那接下来 , 我们还是让表大一些 然后让所有内容居中显示 那接下来 , 就完成我们最核心的操作 , 将这两个位置进行合并 此时我们看一下效果 , 发现这个页面发生了错乱 这是因为如果我们要合并单元格的话 , 那被合并的单元格就必须删除掉 , 这样才不会篡位 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*4td*2 --!-- border1px 设置表格边框cellspacing0px 设置单元格之间紧密相接--table border1px cellspacing0px width30%!-- 第一行 --tr!-- 表头需要用 th 实现 --th姓名/thth手机号/th/tr!-- 第二行 --tr aligncenter!-- rowspan2 表示从当前格开始, 横跨两行 --td rowspan2张三/tdtd13800000000/td/tr!-- 第三行 --tr aligncenter!-- 需要将被合并的单元格注释掉, 避免页面错乱 --!-- td张三/td --td13800000001/td/tr!-- 第四行 --tr aligncentertd李四/tdtd13900000000/td/tr/table
/body
/html案例 3 : 跨列表格
接下来 , 我们需要将第二列和第三列进行合并 我们还是先将最基本的框架搭出来
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*3td*3 --!-- border1px 设置表格边框cellspacing0px 设置单元格之间紧密相接--table border1px cellspacing0px width30%trth姓名/thth手机号/thth手机号/th/trtr aligncentertd张三/tdtd13800000000/tdtd13800000001/td/trtr aligncentertd李四/tdtd13900000000/tdtd13900000001/td/tr/table
/body
/html那接下来 , 我们就实现将第一行的第二列和第三列合并 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 快捷键: tabletr*3td*3 --!-- border1px 设置表格边框cellspacing0px 设置单元格之间紧密相接--table border1px cellspacing0px width30%trth姓名/th!-- colspan2 表示合并两列 --th colspan2手机号/th!-- 我们需要将被合并的单元列注释掉 --!-- th手机号/th --/trtr aligncentertd张三/tdtd13800000000/tdtd13800000001/td/trtr aligncentertd李四/tdtd13900000000/tdtd13900000001/td/tr/table
/body
/html这样的话 , 这个效果我们也实现了 6.5 布局标签 那 div 标签与 span 标签单独使用没有任何意义 , 需要搭配 CSS 来使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- div 标签: 块级标签, 独占一行的标签比如 : h1~h6、p、br 等--div块级标签1/divdiv块级标签2/divdiv块级标签3/div!-- span 标签: 行内标签, 共处一行的标签比如 : img、a 等--span行内标签1/spanspan行内标签2/spanspan行内标签3/span
/body
/html6.6 表单标签
6.6.1 表单标签
表单 : 在网页中主要负责数据的采集功能 , 使用 标签定义表单 标签也不能够单独使用 , 必须搭配不同类型的表单项 (元素) , 比如 : 不同类型的 input、下拉列表、文本域等等 .
我们可以具体来看一下 form 的用法
form : 定义表单
action : 规定当提交表单时向何处发送表单数据method : 规定用于发送表单数据的方式 get : 浏览器会将数据直接附在表单的 action URL 之后 . 大小有限制 .post : 浏览器会将数据放到 HTTP 请求消息体中 . 大小无限制 .
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签:1. 如果想将表单中的数据提交到后台服务器, 必须将输入的内容放到 form 标签文本中2. action#: action 的属性值需要填写提交数据的服务器地址, 没有的话习惯性填写成 #3. methodget 表示提交数据到后台的方式, 常见方式:(1) get - 默认值特点: ① 请求数据书写在 URL 后面http://www.baidu.com?usernamezhangsanpassword1234 ...② 隐私性低③ 不能携带大量数据, 不同浏览器限制大小不一致④ 不能携带字节数据(2) post特点:① 请求数据不书写在 URL 后面http://www.baidu.com② 隐私性高③ 能携带大量数据, 可以携带字节或者字符数据注意: get 请求效率高, post 效率低--form action# methodget!-- 这里填写需要提交到服务器的数据 --/form
/body
/html6.6.2 表单标签 - 表单项 input 标签
input : 表单项 , 通过 type 属性控制输入的形式
type 取值描述效果text默认值 . 定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上按按钮hidden定义隐藏的输入字段submit定义提交按钮 , 提交按钮会把表单数据发送到服务器reset定义重置按钮 , 重置按钮会清除表单中的所有数据button点击可自定义的按钮
我们分别来看
text :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr/form
/body
/htmlinput 标签还可以指定 name 属性 , 当表单被提交时 , 浏览器会将输入字段的值与其 name 属性一起发送给服务器 , 例如 : password :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr/form
/body
/htmlradio :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr单选框 : input typeradio 男 input typeradio 女br/form
/body
/html对于单选按钮 radio 标签来说 , 如果想实现单选 , 就必须给 input 标签一个 name 属性 , 并且属性值一致 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr单选框 : input typeradio namesex 男 input typeradio namesex 女br/form
/body
/htmlcheckbox :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr单选框 : input typeradio namesex 男 input typeradio namesex 女br多选框 : input typecheckbox 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球/form
/body
/htmlfile :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr单选框 : input typeradio namesex 男 input typeradio namesex 女br多选框 : input typecheckbox 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr/form
/body
/htmlhidden : hidden 叫做隐藏域 , 就是页面不需要给用户展示元素 , 但是后台需要数据 , 此时就可以使用隐藏域 比如 : 前端想传递给后端商品 id , 就需要记录一下商品 id 值 , 但是这个值还不能给用户展示 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetextbr密码 : input typepasswordbr单选框 : input typeradio namesex 男 input typeradio namesex 女br多选框 : input typecheckbox 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr隐藏域 : input typehidden value123456789/form
/body
/html对于 input 标签 , 后台获取的值都是 input 标签的 value 的值 . 像 text / password 等表单项 , 也是具有 value 属性的 , 属性值就是用户在输入框中输入的内容 . 我们也可以通过 value 属性设置输入框的默认值 . submit :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetext value请输入用户名br密码 : input typepasswordbr单选框 : input typeradio namesex 男 input typeradio namesex 女br多选框 : input typecheckbox 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr隐藏域 : input typehidden value123456789br上传 : input typesubmit/form
/body
/html我们注意 URL 的变化 , get 请求会将携带的数据放到 URL 中 . 我们也可以给 submit 属性指定 value 值 , 这样页面就是显示我们所设置的 value 值 补充 : 如果单选按钮和复选框需要被默认选中 , 就需要给 input 标签添加 checked 属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetext value请输入用户名br密码 : input typepasswordbr!-- 指定 checkedchecked 属性表示默认被选中可以直接写成 checked--单选框 : input typeradio namesex checkedchecked 男 input typeradio namesex 女br多选框 : input typecheckbox checked 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr隐藏域 : input typehidden value123456789br上传 : input typesubmit/form
/body
/htmlreset :
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --用户名 : input typetext value请输入用户名br密码 : input typepasswordbr单选框 : input typeradio namesex checkedchecked 男 input typeradio namesex 女br多选框 : input typecheckbox checked 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr隐藏域 : input typehidden value123456789br上传 : input typesubmitbr重置 : input typereset value重置/form
/body
/html输入框隐藏展示 : !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --!-- placeholder 表示输入框中的隐藏提示 --用户名 : input typetext placeholder请输入用户名br密码 : input typepasswordbr单选框 : input typeradio namesex checkedchecked 男 input typeradio namesex 女br多选框 : input typecheckbox checked 唱 input typecheckbox 跳 input typecheckbox rap input typecheckbox 篮球br上传文件 : input typefilebr隐藏域 : input typehidden value123456789br上传 : input typesubmitbr重置 : input typereset value重置/form
/body
/htmlselect 标签 标签是用来定义下拉列表的 , 需要结合 定义列表项 , 有几个下拉项就有几个 option
提交到后台的数据就是用户当前选中的下拉项的 option 中的 value 的值 option 中 , 提供了 selected 属性 , 表示默认当前下拉项被选中 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body!-- form 表单标签 --form action# methodget!-- 下拉框选项 --select nameedu idedu!-- 一般第一个下拉框都作为提示信息, value 属性设置为空 --option value请选择你的学历/option!-- selected 属性表示默认当前下拉框被选中 --option valuebk selected本科/optionoption valuess硕士/optionoption valuebs博士/option/select/form
/body
/htmltextarea 文本输入框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --!-- 输入框 --!-- cols 是输入框的高度, rows 是输入框的宽度 --textarea cols30 rows10/textareabr!-- 提交按钮 --input typesubmit/form
/body
/htmllabel 标签
label : 为表单项定义标注 , 可以对表单项进行定位查找
比如我们有一个场景
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --性别: input typeradio namesex valuemale男input typeradio namesex valuefemale女/form
/body
/html此时我们选中文字 , 是复制的状态 . 那我们想要实现点击文字 , 就能选中元素 , 就可以使用 label 标签来去进行定位查找 , 将该文字部分定向到选项位置 .
使用 label 之后 , 我们只需要点击 label 标签的文本即可定位到对应的标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --性别: input typeradio namesex valuemale idboylabel forboy男/label input typeradio namesex valuefemale idgirllabel forgirl女/label /form
/body
/html要注意的是 , 我们需要通过 label 标签的 for 属性值查找对应标签的 id 属性值 , 所以需要给 input 标签添加一个 id 属性 此时我们就可以查看一下效果 我们还可以恶搞一下 , 无论选男选女 , 最后都会选到男的位置 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form 表单标签 --form action# methodget!-- 这里填写需要提交到服务器的数据 --性别: input typeradio namesex valuemale idboylabel forboy男/label input typeradio namesex valuefemale idgirllabel forboy女/label /form
/body
/html
