javaee|HTML基础 javaee|html

HTML基础

1.HTML结构
- 1.1HTML文件基本结构
- 1.2标签层次结构
- - 快速生成代码框架
2.HTML常见标签
- 2.1注释标签
- 2.2标题标签：h1-h6
- 2.3段落标签：p
- 2.4换行标签:br
- 2.5格式化标签
- 2.6图片标签
- - 关于目录结构
  - 代码示例
- 2.7超链接标签:a
- - 链接的几种形式
- 2.8表格标签
- - 基本使用
  - 合并单元格
- 2.9列表标签
- 2.10表单标签
- - form标签
  - input标签
  - label 标签
  - select标签
  - textarea
- 2.11无语义标签：div & span
3.综合案例:展示简历信息
4 综合案例：填写简历信息
5.HTML特殊字符

1.HTML结构 HTML代码时由"标签构成的"，也叫做超文本标记语言。
举例：

hello

●标签名 (body) 放到 < > 中
●?部分标签成对出现. 为开始标签, 为结束标签.
●少数标签只有开始标签, 称为 “单标签”.
●开始标签和结束标签之间, 写的是标签的内容. (hello).
●开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了?个唯?的标识符(身份证号码).

hello

1.1HTML文件基本结构

第一个页面 - 锐客网 hello world

文章图片

●html 标签是整个 html ?件的根标签(最顶层标签)
●head 标签中写??的属性.
●title 标签中写的是??的标题.
●body 标签中写的是??上显示的内容.

1.2标签层次结构 ● ??关系
● 兄弟关系

第一个页面 - 锐客网 hello world

其中：

● head 和 body 是 html 的?标签(html 就是 head 和 body 的?标签)。
●title 是 head 的?标签. head 是 title 的?标签。
●head 和 body 之间是兄弟关系.

可以使用chrome的开发者工具查看页面结构。

F12 或者右键审查元素, 开启开发者?具, 切换到 Elements 标签, 就可以看到??结构细节.

文章图片

标签直接的结构关系，构成了一个DOM树

DOM 是 Document Object Mode (?档对象模型) 的缩写.

文章图片

快速生成代码框架
创建xxx.html,直接输入!自动生成代码主体框架。

Document - 锐客网

文章图片

描述??的字符编码?式. 没有这??可能会导致中?乱码.

2.HTML常见标签 2.1注释标签注释不会显示在界面上，目的是提高代码的可读性。

【javaee|HTML基础】

文章图片

ctrl + / 快捷键可以快速进?注释/取消注释.

注释的原则：
● 要和代码逻辑?致.
●尽量使?中?.
●不要传递负能量.
2.2标题标签：h1-h6 有六个，从h1-h2，数字越大，则字体越来越小。

hello hello hello hello hello hello

文章图片

2.3段落标签：p 把一段较长的文本粘贴到html中，会发现并没有分成段落。
例如：

文章图片

展示结果：

文章图片

p标签表示一个段落。

这是?个段落

通过p标签改进上述情况，把每个段落放在p标签中。

文章图片

文章图片

展示结果：

文章图片

注意：

● p 标签之间存在?个空隙.
● 当前的 p 标签描述的段落, 前?还没有缩进.
●?动根据浏览器宽度来决定排版.
●html 内容?尾处的换?, 空格均?效.
●在 html 中文字之间输入的多个空格只相当于?个空格.
●html 中直接输?换?不会真的换?, ?是相当于?个空格.

2.4换行标签:br br是break的缩写，表示换行，
● br 是?个单标签(不需要结束标签)
●br 标签不像 p 标签那样带有?个很?的空隙.
●

是规范写法。
示例：

文章图片

文章图片

2.5格式化标签

>strong 加粗加粗倾斜倾斜删除线 >删除线下划线下划线>strong 加粗加粗倾斜倾斜删除线 >删除线下划线下划线

● 加粗: strong 标签和 b 标签

文章图片

文章图片

●倾斜: em 标签和 i 标签

文章图片

文章图片

加粗并倾斜：

文章图片

文章图片

●删除线: del 标签和 s 标签

文章图片

文章图片

●下划线: ins 标签和 u 标签

文章图片

文章图片

2.6图片标签 img标签必须带有 src属性，表示图片的路径。

文章图片

文章图片

文章图片

此时要把 rose.jpg这个图片放到和html的同级目录中。
img标签的其他属性：
●alt: 替换?本. 当?本不能正确显示的时候, 会显示?个替换的?字.

文章图片

文章图片

●title: 提示?本. ?标放到图?上, 就会有提示.

文章图片

●width/height: 控制宽度?度. ?度和宽度?般改?个就?, 另外?个会等?例缩放. 否则就会图?失衡.

文章图片

文章图片

●border: 边框, 参数是宽度的像素. 但是?般使? CSS 来设定.

文章图片

文章图片

注意：

属性可以有多个, 不能写到标签之前

属性之间?空格分割, 可以是多个空格, 也可以是换?.

属性之间不分先后顺序

属性使? “键值对” 的格式来表示.

关于目录结构
对于?个复杂的?站, ??资源很多, 这种情况可以使??录把这些?件整理好.
1.相对路径: 以 html 所在位置为基准, 找到图片的位置.

●同级路径: 直接写?件名即可 (或者 ./)
●下?级路径: image/1.jpg
●上?级路径: …/image/1.jpg

2.绝对路径: ?个完整的磁盘路径, 或者网络路径。
● 磁盘路径 D:\rose.jpg
●?络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
代码示例
1.使?相对路径: 创建?个 image ?录和 html 同级, 并放??个 rose2.jpg

文章图片

2.使?相对路径2: 在 image ?录中创建?个 html, 并访问上级?录的 rose.jpg

文章图片

3.使?绝对路径1: 最好使? / , 不要使? \

文章图片

4.使?绝对路径2: 使??络路径

文章图片

2.7超链接标签:a ●href: 必须具备, 表示点击后会跳转到哪个??.
●target: 打开?式. 默认是 self. 如果是 blank 则?新的标签?打开.

百度

文章图片

文章图片

链接的几种形式
●外部链接: href 引?其他?站的地址

百度

文章图片

●内部链接：网站内部页面之间的连接，写相对路径即可。

在?个?录中, 先创建?个 1.html, 再创建?个 2.html

我是 1.html 点我跳转到 2.html我是 2.html 点我跳转到 1.html

文章图片

文章图片

●空链接：使用#在href中占位

空链接

文章图片

●下载链接: href 对应的路径是?个?件. (可以使? zip ?件)

下载?件

文章图片

●网页元素链接: 可以给图?等任何元素添加链接(把元素放到 a 标签中)

文章图片

文章图片

●锚点链接: 可以快速定位到??中的某个位置.

第?集第?集第三集第?集剧情第?集剧情 ... 第?集剧情第?集剧情 ... 第三集剧情第三集剧情 ...

文章图片

禁? a 标签跳转: 或者

2.8表格标签基本使用
● table 标签: 表示整个表格
●tr: 表示表格的??
●td:表示一个单元格
●th:表示表头单元格，会居中加粗。
●thread:表格的头部区域
●tbody:表格的主体区域。
table包含tr,tr包含td或者th.

这些属性都要放到 table 标签中.
● align 是表格相对于周围元素的对??式. align=“center” (不是内部元素的对??式)
● border 表示边框. 1 表示有边框(数字越?, 边框越粗), “” 表示没边框.
● cellpadding: 内容距离边框的距离, 默认 1 像素
● cellspacing: 单元格之间的距离. 默认为 2 像素
● width / height: 设置尺?.

文章图片

姓名性别年龄张三男 18 李四 ? 20

文章图片

文章图片

合并单元格
●跨行合并: rowspan=“n”

文章图片

文章图片

●跨列合并: colspan=“n”

文章图片

文章图片

步骤：

先确定跨?还是跨列

找好?标单元格(跨列合并, 左侧是?标单元格; 跨?合并, 上?是?标单元格)

删除的多余的单元格

2.9列表标签 ●无序列表[重要] ul li

文章图片

文章图片

●有序列表[?的不多] ol li

文章图片

ul：unordered lists 无序列表
ol:ordered lists

●?定义列表[重要] dl (总标签) dt (?标题) dd (围绕标题来说明) 上?有个?标题, 下?有?个围绕着标题来展开的.

文章图片

文章图片

2.10表单标签表单是让?户输?信息的重要途径，分成两个部分:：
●表单域: 包含表单元素的区域. 重点是 form 标签.
●表单控件: 输?框, 提交按钮等. 重点是 input 标签。
form标签

... [form 的内容]

描述了要把数据按照什么方式, 提交到哪个页面中。
input标签
各种输入控件、单行文本框、按钮、单选框、复选框。
●type(必须有)，取值种类很多，button,checkbox,tex,file,image,password,radio等。
●name:给input起个名字，尤其是对于单选按钮，具有相同的name才能多选一。

文章图片

●value: input 中的默认值.

文章图片

●checked：默认被选中. (?于单选按钮和多选按钮)

文章图片

●maxlength:设定最大长度(文本框，密码框，)

文章图片

1.文本框

文章图片

文章图片

2.密码框

文章图片

文章图片

3.单选框

性别: 男 ?

文章图片

文章图片

4.复选框

爱好: 吃饭睡觉打游戏

文章图片

文章图片

5.普通按钮

文章图片

文章图片

6.提交按钮

文章图片

文章图片

7.清空按钮

文章图片

文章图片

8.选择文件

文章图片

文章图片

label 标签
搭配 input 使用，点击 label 也能选中对应的单选/复选框。增强用户体验。
●for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有?的)。

男

文章图片

文章图片

select标签
下拉菜单
●option 中定义 selected=“selected” 表示默认选中.

>

文章图片

文章图片

textarea

文章图片

文章图片

2.11无语义标签：div & span

div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度
就是两个盒子，用于网页布局

●div 是独占一行的, 是?个大盒?.

文章图片

文章图片

●span 不独占一行, 是?个小盒?.

文章图片

文章图片

3.综合案例:展示简历信息

张某某的简历 - 锐客网张某某基本信息求职意向:Java开发工程师联系电话:18654634704 邮箱:aaxbwhs.qq.com 我的Gitee 我的博客教育背景 2006-2012 小学 2012-2015 初中 2015-2018 高中 2018-2022 大学专业技能掌握基础java语法知识掌握基础的数据结构和算法掌握网络编程掌握多线程我的项目留言板开发时间:2020-9 到 2022-5 功能介绍: 支持留言功能支持匿名留言功能个人博客开发时间:2021-9到2022-4 功能介绍: 支持登录支持发表文章支持文章的浏览量统计支持文章管理个人评价在校期间表现良好，积极学习专业知识，团结同学，认真学习，具有吃苦耐劳的精神。

文章图片

文章图片

4 综合案例：填写简历信息

填写简历信息 - 锐客网请填写简历信息姓名性别文章图片男文章图片 ? 出生日期 > > > 就读学校应聘岗位前端开发后端开发测试开发运维开发掌握的技能项目经历我已仔细阅读过公司的招聘要求查看我的状态请应聘者确认: 以上信息真实有效能够尽早去公司实现能接受公司的加班文化

文章图片

5.HTML特殊字符有些特殊的字符在html文件中是不能直接表示的：

空格:
小于号:<
大于号:>
按位与:&

javaee|HTML基础

推荐阅读

佳能n100怎么自拍佳能n100s怎么

惠普PAVILIONX2笔记本换充电器维修报价

遇到三菱空调显示两竖六水滴怎么办？3个处理方法帮助你

云麦好轻Color 云麦好轻color说明书

同事说分支没什么用（）

禁抗元年，黄芪多糖有望成为抗替新品黄芪多糖

常小兵是谁的女婿常小兵背景

沃尔沃s60车主评论老款沃尔沃s60质量怎么样

林内热水器一直显示45是什么故障,来了解一下

“996”“007”终于被定性,年轻人可以好好谈恋爱、结婚、了吗？

罗西尼自动机械表值得购买吗罗西尼表怎么样

Angular模板简介

全球首款5G量子手机发布这是款什么高科技产品贵吗？

车面漆怎么保养比较好汽车漆面怎样保养好

脚后跟疼怎么锻炼

阴阳师海忍皮肤忍鲤川行阴阳师海忍忍鲤川行皮肤图片展示

美眼仪十大品牌美眼仪如何选购

ARKit是什么 ARKit怎么用

二月二龙抬头为啥要剪头发

中文编程手机版，有没有手机编程中文版软件

姓名
性别	文章图片男文章图片 ?
出生日期	> > >
就读学校
应聘岗位	前端开发后端开发测试开发运维开发
掌握的技能
项目经历
	我已仔细阅读过公司的招聘要求
	查看我的状态
	请应聘者确认: 以上信息真实有效能够尽早去公司实现能接受公司的加班文化