【JavaWeb】HTML常用标签
HTML标签结构
HTML语言主要都是由标签构成的。
标签名 在 <> 中 如<body>
标签大部分成对出现，代表开始和结束 如 <body>标签中的内容</body>
少部分单个出现，叫单标签 </br> 代表换行
标签中可以加属性，多个属性之间使用空格隔开
HTML文件结构
<html><head><title>Document</title></head><body></body></html><html> </html> 是整个html文件的顶层标签(根标签)
<head> </head> 整个页面的属性
<title> </title> 页面的标题
<body> </body> 页面的内容
HTML常见标签
注释标签
<!-- --><!-- 上面这个标签就是注释 --><!-- 编译器中按 Ctrl + / 快速生成 --><!-- 在浏览器查看源码时可以看到注释 -->标题标签
<h1>一级标题</h1><h2>二级标题</h2><!-- 总共有六级标题 -->
段落标签
<p>一个p标签之间就是一个段落</p><p>这是另外一个段落</p>
换行标签
一个p标签之间就是一个段落</br>换行了，使用这个比<br>更为标准
格式化标签
<b>加粗</b><strong>这也可以加粗</strong></br><i>倾斜</i><em>这也可以倾斜</em></br><del>删除线</del><s>这也是删除线</s></br><ins>下划线</ins><u>这也是下划线</u>
图片标签
<!-- 测试图片标签 --><!-- src 图片的路径 --><!-- 路径可以是相对路径，也可以是绝对路径 表示方法都一样 --><!-- alt 当图片不能正确显示的时候显示alt中的内容 --><!-- width 图片的大小(只设置width 长和宽会按比例缩放) --><!-- border 图片的边框 --><!-- title 鼠标悬停出来的文字 --><!-- 属性可以有多个，之间用空格或回车分隔 --><img src="picture1.png" alt="宇航员" width="500px" border="5px"title="宇航员">
超链接标签
<!-- a 超链接 点击后可以跳转到那个界面 --><!-- >< 中间的文字会显示到网页上 --><a href="https://www.bilibili.com/">点我跳到b站</a><!-- 点击目录中的html文件 --><a href="Test2.html">点我跳到Test2</a><!-- # 用这个符号占位 --><a href="#">我是一个空链接</a><!-- 内容还可以是文件，这样就可以下载 --><a href="picture1.png">点我查看宇航员图片</a><a href="picture1.7z">点我下载压缩包</a><!-- 链接中加图片 图片=链接 --><a href="https://www.bilibili.com/"><img src="picture1.png" width="100px"></a><!-- 点击链接后会生成一个新的标签页，而不是覆盖 --><a href="https://www.bilibili.com/" target="_blank">点我增加新的标签页</a>
表格标签
<!-- 表格标签 --><!-- table 整个表格的开始和结束 --><!-- 表格中可以设置边框的属性，一般用CSS来设置 --><table align="ceter" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><!-- tr 表示一行 --><tr><!-- th 表示表头中的一个单元格 --><th>姓名</th><th>学号</th></tr><tr><!-- td 表示一个单元格 --><td>张三</td><td>10001</td></tr><tr><td>李四</td><td>10002</td></tr><tr><td>王五</td><td>10003</td></tr></table>
列表标签
<!-- 列表标签 --><!-- ul unordered list 无序列表 --><ul><!-- li 列表项 --><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ul><!-- ol ordered list 有序列表 --><ol><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ol><!-- dl 自定义列表 --><dl><!-- dt 小标题 --><dt>课程</dt><!-- dd 列表项 --><dd>C语言</dd><dd>Java</dd><dd>大学物理</dd><dd>高等数学</dd></dl>
表单标签
表单标签是用户输入的重要途径.
input标签
<!-- 表单标签 --><!-- text 输入文本 --><input type="text"><br/><!-- password 输入密码 --><input type="password"><br/><!-- radio 单选框(默认可以多选) --><!-- name 必须相同才能实现多选一的效果 --><!-- checked 默认初始值选哪个 --><input type="radio" name="sex"> 男<input type="radio" name="sex" checked="checked"> 女<br/><!-- checkbox 多选框 --><input type="checkbox"> A<input type="checkbox"> B<input type="checkbox"> C<input type="checkbox"> D<br/><input type="button" value="这是个按钮"onclick="alert('按了按钮的结果')"><br/><input type="file"><br/>
select标签
<!-- select 选择 --><select><!-- option 选择的选项 --><option>请选择年份</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select>
textarea标签
<textarea cols="30" rows="10">写点内容</textarea>
无语义标签
<div>div标签独占一行div标签除了表单标签不能模拟之外，剩下所有的标签基本上都可以模拟<span>aaa</span><span>bbb</span></div><div>另一个div<span>ccc</span><span>ddd</span></div>
有什么错评论区指出。希望可以帮到你。