javaEE初阶 — HTML 中的常见标签
文章目录
- 注释标签
- 标题标签：h1 h6
- 段落标签：p
- 换行标签：br
- 格式化标签
- 图片标签：img
- 1. img 的 alt 属性
- 2. img 的 title 属性
- 3. width 与 heigth 属性用来描述图的尺寸
- 超链接标签：a
- 表格标签
- 列表标签
- 表单标签
- 1. from 标签
- 2. input 标签
- 3. select 标签
- 4. textarea 标签
- 5. 无语义标签：div span
注释标签
html 的注释和一般语言的注释差别很大。
如果要使用 注释 ，将想要注释的内容使用 < !-- --> 选中即可，注释的内容就不会出现在网页上了。
如果想要查看当前的注释代码，可以在显示的网页上右击选择 查看网页源代码
就可以发现在源代码中注释过的代码了。
可以使用 Ctrl + / 来快速注释代码，按一下就是注释，再按一下就是取消注释。
标题标签：h1 h6
标题标签一共有 h1 ~ h6 6 个级别的标签，从 h1 到 h6 标题逐渐变小变细，所以最大的标题标签是 h1，最小的就是 h6。
可以清楚地看到标签的大小是逐渐变小变细的。
这里需要注意的是每个标题都是独占一行的，不会因为代码的编写而改变。
尽管现在的代码格式变了，但是每一个标题还是独占一行。
段落标签：p
段落标签使用的 < p>< /p> 标签。
每个段落之间不光是有一个换行，同时还有一个段落间距。
也可以使用 lorem 来自动生成一个文档。
换行标签：br
换行标签是 br。
可以发现有此标签处就换行了，而且是有几个 < br> 标签就换几个行。
格式化标签
格式化标签有 变粗、倾斜、删除线、下划线 这几种。
<html>
<head></head><body><strong>变粗</strong><b>变粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u></body>
</html>
这些标签都不是独占一行的。
图片标签：img
网页上是可以显示图片的，这里用到的是 img。img 有一个核心的属性— src 这是必须填的。
想在网页上显示一个图片，可以采取 绝对路径 或者 相对路径。
绝对路径的方式：
可以发现 d 盘中有一个小姐姐图片。
<html>
<head></head><body><img src="d:/xiaojiejie.jpg"></body>
</html>
直接将图片的绝对路径写在 img 标签里面即可，src 就是它的属性。
可以看到网页中正确的显示出来了。
相对路径的方式：
使用相对路径的时候一定要明确 工作目录是哪个！！！（有个基准）
html 的工作目录就是该 html 文件所在的目录。
首先将这个图片保存到与这个 html 文件于同一个目录。
这个时候的路径就是 ./xiaojiejie.jpg
<html>
<head></head><body><img src="./xiaojiejie.jpg"></body>
</html>
也可以将上述的 ./ 去掉，变成以下：
<html>
<head></head><body><img src="xiaojiejie.jpg"></body>
</html>
将这个图片放到一个新的文件 image 中，此时的路径应该如下书写：
<html>
<head></head><body><img src="image/xiaojiejie.jpg"></body>
</html>
此时的网页依然可以显示出这个小姐姐的图片。
也可以将这个图片的地址填写到浏览器中就可以直接打开图片了。
在网页上右击这个图片就可以获取这个图片的地址。还可以将这个图片地址放到 img 里，也可以显示出图片。
1. img 的 alt 属性
alt 属性：在图片挂了的时候，就会显示出 alt 对应的文本。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐"></body>
</html>
当图片挂了之后就会出现上述 alt 中的文本。
2. img 的 title 属性
有了这个属性，鼠标悬停在这个上面的时候就会给出一个提示。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐"></body>
</html>
3. width 与 heigth 属性用来描述图的尺寸
宽度和高度可以是同时设置，也可以是只设置一个。如果只设置一个，另一个就会等比例的进行缩放或者放大。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐" width="100px"></body>
</html>
可以看到图片等比例的缩放了。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐" width="100px" height="100px"></body>
</html>
宽度和高度如果是同时设置的，图片就可能会变形，以上的图片就有些许的变形。
超链接标签：a
“链接” 是快捷方式的意思，而 “超” 链接则是指可以跳转到当前网页之外的页面。
这个标签是利用 href 属性来实现快捷跳转的。
<html>
<head></head><body><a href="https://www.baidu.com">百度</a><a href="https://www.sogou.com">搜狗</a></body>
</html>
点击百度和搜狗就会跳转到对应的网页了，但是新的网页会把旧的网页给替换掉。
可以看到点击 “搜狗” 后就把之前的页面给替换了。
超链接标签还有一个属性：target，
这个属性一般都是写作 target=“_blank”，此时就可以打开一个新的标签页而不会替换掉之前的标签页。
<html>
<head></head><body><a href="https://www.baidu.com" target="_blank">百度</a><a href="https://www.sogou.com" target="_blank">搜狗</a></body>
</html>
可以看到点击 “百度” 后，并没有将原来的页面替换掉。
表格标签
table：表示整个表格。
tr：表示一行。
td 表示一个单元格。
th 表示表头的中一个单元格
<html>
<head></head><body>
<table><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
虽然对应的信息已经显示出来了，但是它还没有单元格，此时这还不是一个表格。而且信息的间隙还比较密集。
下面首先将信息的间隙扩大，给表格设置宽度和高度。
<html>
<head></head><body>
<table width="500px" height="300"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
可以看到间隙已经扩大了，但是信息还没有对齐而且信息未对齐。
此时要解决的是表格该没有线条的问题，使用 border 这个属性即可解决，将这个属性设置为1。
<html>
<head></head><body>
<table width="500px" height="300" border="1"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
仔细看的话这里的表格边线是有两条的，这里给它设置为一条边线。
这里用到的属性是 cellspacing，将这个属性的值设为0即可。
<html>
<head></head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
接下来要解决的就是对齐的问题。
如果要让信息对齐，就需要使用 CSS
<html>
<head>
<style>td {text-align: center;}
</style>
</head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
这里的 head 标签里的代码意思就是让页面中所有的 td 标签中的文字到水平居中。
这里的 CSS 只是简单的提一下，后面会细讲。
列表标签
列表标签分为 有序列表、无序列表、列表项，
有序列表是 ol，这是 ordered list 的简写，无序列表是 ul，这是 unordered list 的简写。
列表项是 li，这是 list item 的简写。
<html>
<head></head><body><h3>我的老婆们</h3><ol><li>咬人猫</li><li>兔总裁</li><li>张奶糖</li><li>阿叶君</li></ol><ul><li>咬人猫</li><li>兔总裁</li><li>张奶糖</li><li>阿叶君</li></ul></body>
</html>
有序列表排名是分先后的，无序列表是不分先后的。
在浏览器中按下 F12 或者 右键选择检查，就可以打开浏览器的 “开发者工具”，借助这个工具就可以看到这个页面是怎么实现的。
表单标签
表单是让用户输入信息的重要途径。
分成两个部分：
表单域： 包含表单元素的区域，重点是 from 标签。
表单控件： 输入框，提交按钮等，重点是 input 标签。
1. from 标签
使用 from 标签来进行前后端的交互，把页面上，用户的操作或者是输入提交到服务器上。
这里后面再进行讲解，这里暂时只是提一嘴。
2. input 标签
input 有很多的形态，能够表现成各种用户用来输入的组件。
1、单行文本框
<body><input type="text">
</body>
2、下面的也是一个文本框，只不过是用来输入密码的。
<body><input type="password">
</body>
3、单选框
<body>请选择性别：<input type="radio"> 男<input type="radio"> 女
</body>
此时会发现两个选择都可以选，这是不符合逻辑的。
因此对于单选框，我们可以使用 name 属性来进行设置，name 属性相同的，单选框的值之间是互斥的。
<body>请选择性别：<input type="radio" name="gender"> 男<input type="radio" name="gender"> 女
</body>
checked 可以设置单选框默认选中的。
<body>请选择性别：<input type="radio" name="gender" checked="checked"> 男<input type="radio" name="gender"> 女
</body>
4、复选框
<body>你每天都干什么：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 学习
</body>
复选框也是可以，使用checked 设置默认选中的。
<body>你每天都干什么：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox" checked="checked"> 学习
</body>
5、按钮
<body><input type="button" value="这是一个按钮">
</body>
对于按钮点击后会有什么作用，需要通过 js 来配合，以后会讲解。
6、提交按钮（搭配 from 使用）
type=“submit”，外表和 button 是差不多的，会触发 from 和服务器的交互。
具体以后再讲。
7、文件选择框
<body><input type="file">
</body>
点击按钮，会让我们选择一个文件。
input 的功能很丰富，是和用户交互最主要的一个标签之一。
3. select 标签
select 是下拉菜单
<body><select><option>吃饭</option><option>睡觉</option><option>学习</option><option>运动</option></select>
</body>
可以任意选择上面的选项。
4. textarea 标签
textarea 标签 是多行编辑框
<body><textarea cols="30" rows="10"></textarea>
</body>
5. 无语义标签：div span
无语义标签指的是没有特殊含义的标签，意思就是可以在任何场景中使用。
div 默认是独占一行的（块级元素），span 默认是不独占一行的（行内元素）。
