目录
一、认识 HTML 标签
二、HTML 文件基本结构
三、开发者工具
四、HTML常见标签
1.注释标签
2.标题标签(h1-h6)
3.段落标签(p)
4.换行标签
5.格式化标签
6.图片标签(img)
6.1网络路径
6.2绝对路径
6.3相对路径
7.标签属性
8.超链接(a)
五、表格标签
1.制作表格
2.合并单元格
3.列表标签
4.表格标签
4.1 form 标签
4.2 input 标签
4.3 label 标签
4.4 select 标签
4.5 textarea 标签
4.6无语义标签 div & span
在学习 HTML 之前,我们要知道 HTNL 属于前端的范畴。前端“三剑客”即HTML+CSS+JS。
那么它们分别是什么呢?
HTML--主要描述页面上的内容。
CSS--主要描述页面上的内容如何排版、布局以及样式等。
JS--主要用来页面交互使用。
本篇文章将详细介绍 HTML 的相关知识。
首先我们可以直接创建一个文本文件“hello.txt”,然后填入“你好,世界”,将文件后缀改为“html”,如下图所示。
打开文件后,打开如下图所示的界面。
以上的文本文件格式和直接改后缀名为 html ,不是标准的 HTML 格式,但是浏览器依然可以正确解析,是因为浏览器有非常强的鲁棒性(简单理解为:面对粗鲁的时候,依然可以表现的很棒)。
HTML 代码是由“标签”构成的。
hello
hello
第一个页面
hello world
html 是根标签,以上整个的为HTML的标准格式,也称为DOM树。修改文档内容为以上代码后,再打开浏览器,显示为以下样式:
在浏览器中点击快捷键:F12或者在设置栏按下图所示选择。
打开后,如下图所示。
注释不会显示在界面上,目的是提高代码的可读性。
标题标签有六个, 从 h1 - h6。对字体进行了加粗,数字越大, 则字体越小。
hello h1
hello h2
hello h3
hello h4
hello h5
hello h6
p 标签表示一个段落。当我们在输入段落内容时,直接在 idea 中进行换行是不会直接显示为段落的,只有在加上标签后,才会被认为这是一个段落。
这是第一个段落
这是第二个段落
这是第三个段落
需要注意的是:
br 是 break 的缩写,表示换行。br 是一个单标签(不需要结束标签),换行标签在换行后不会出现空行。
这是第一个段落
这是第二个段落
这是第三个段落
strong 加粗
b 加粗
em 倾斜
i 倾斜
del 删除线
s 删除线
ins 下划线
u 下划线
观察以上标签,可以看到格式化标签是分行去写的,但是在展示时是展示在一行的;h1-h6 也是分行去写的,但是展示时却自动换行了,这是为什么呢?
因为在 HTML 中,一般是不会进行换行的,除非使用段落标签 p 或者换行标签 br。这里就涉及到了两个新的概念:行内元素和块内元素。
块内元素是需要独占一行的。h1-h6 属于块内元素。
行内元素只占据一行的一部分。格式化标签就属于行内元素(设置高度是没有用的)。
img 标签必须带有 src 属性,表示图片的路径。
![]()
其中 src 可以是绝对路径、相对路径或者网络路径。
首先,通过网络路径来演示一下,我们找一个带有图片的网页,选择需要显示在我们自己页面的图片,右键点击选择“复制图像链接”,如下图所示:
可以看到成功在我们自己的界面内显示了图片,但是图片是非常大的,因此我们自行修改图片大小,这里我设置了图片宽度为300px(300像素)。
以上代码中的 width= "300px" 就属于 CSS 代码,用来控制布局以及页面展示。
接下来,我们通过绝对路径演示。在当前 idea 所在的文件下放置提前准备好的图片文件。
即相对于当前的".html"文件的位置,此时即".\CSDN\flower.jpg",其中.\表示的是回到当前目录的父目录,是可以省略的,如下图所示。
但是,当图片文件夹位于“.html”文件的上一级目录时,“..\”是不可以省略的。
我们可以看到,当鼠标放在图片上时会显示 title 后的内容,那 alt 中的内容在哪里显示呢?
修改图片名称为一个并不存在的图片,然后它就显示如上图所示。那么此处的"src title alt"就是标签的属性。
需要注意的是:
百度
在 href 后面输入要跳转的链接,点击后即可跳转至相应的界面,如下图所示。
我们新建一个文件,命名为“download.zip” ,填入到 href 后面。
超链接中的标签都是可以嵌套使用的,接下来我们实现点击一下图片实现跳转到相应的网页。
锚点链接:即 # + id ,可以快速定位到页面中的某个位置(将相应的内容置顶显示)。
第一集
第二集
第三集
第一集剧情
第一集剧情
...
第二集剧情
第二集剧情
...
第三集剧情
第三集剧情
...
# 表示跳转到对应 id 的位置。
table 包含 tr , tr 包含 td 或者 th。
我们通过以上标签在网页中实现以下表格:
姓名 | 张三 | 李四 |
学号 | 1001 | 1002 |
我们通过以下代码实现:
表格标签
姓名
张三
李四
学号
1001
1002
可以看到直接显示为以上界面所示,并没有边框之类。接下来,我们通过 CSS 来设计表格的边框以及样式等等。
这些属性都要放到 table 标签中.
我们接着执行以下代码:
2.合并单元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
姓名
李四
学号
1001
如果我们没有将对应会被覆盖掉的部分的代码删除,程序并不会报错,但是不符合预期效果,如下图所示。
3.列表标签
主要是用来布局的,为了整齐好看。
- 无序列表[重要] ul(unorder list) li
- 有序列表[用的不多] ol(order list) li
- 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕
无序列表
- 星期一
- 星期二
- 星期三
有序列表
- 星期一
- 星期二
- 星期三
自定义列表
- 星期
- 星期一
- 星期二
- 星期三
运行结果如下图所示:
4.表格标签
表单是让用户输入信息的重要途径。
4.1 form 标签
和后端交互,提交数据使用。
描述了要把数据按照什么方式,提交到哪个页面中。 form 表单包括的部分就是需要提交的内容。
4.2 input 标签
各种输入控件,单行文本框,按钮,单选框,复选框。
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度
1)文本框
用户名:
2)密码框
密码:
3)单选框
性别:男
女
单选框之间必须具备相同的 name 属性,才能实现多选一效果
4)复选框
爱好: 排球 篮球 足球
5)普通按钮
6)提交按钮
submit 搭配 form 表单才能使用(提交 name 要有 value 值)。
7)清空按钮
8)选择文件
照片:
4.3 label 标签
搭配 input 使用。点击 label 也能选中对应的单选/复选框,能够提升用户体验。for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。 (此时点击才是有用的)
性别:
label 标签实现了当需要选中“男”时,直接点击文字就可以选中(也就是说将 name 和 type 绑定在了一起)。
4.4 select 标签
下拉菜单
出生年月:
以上代码默认2002年为默认显示,通过以下代码可以设置为“2004”默认显示。
4.5 textarea 标签
表示文本域。
自我评价:
4.6无语义标签 div & span
div & span 可以替代列表标签、换行标签、段落标签等等。div 标签, division 的缩写, 含义是分割
,span 标签, 含义是跨度。二者均用于网页布局。div 是独占一行的,是一个大盒子;span 不独占一行,是一个小盒子。
div : 块级元素。
span : 行内元素。
星期一
星期二
星期三
星期一
星期二
星期三
星期一
星期二
星期三
本篇文章就介绍到这里,下次见~~~~~
你可能感兴趣的:(java,ee,html,java-ee,前端)