JavaWeb - HTML基础

常用标签

• font 文本标签

  <font face="黑体" color="#0099FF">黑体效果</font>
  <font size="3" color="#990000">3号文字效果</font>
  <!-- face=字体样式，color=颜色，size：字体大小 -->

• p 段落标签、br 换行标签

  本段落内容...<p> 第二段内容<p> 第三段内容<br> 第四行内容...<br> 第五行内容 
  <!-- 标签区别：p标签换行但是带的默认间距比br大 -->

• strong 粗体文本、em 斜体文本、u 带下划线文本、sup 上标文本、sub 下标文本

  <strong>粗体文字</strong> 
  <em>斜体文字</em>
  <u>下划线文字</u>
  <sup>上标文字</sup> <sub>下标文字</sub> 
  <!-- 上下标举例使用 -->
   H<sub>2</sub>O:氢气 A<sup>2</sup>+B<sup>2</sup>=1

• 常见特殊符号

  <!-- 小于号：&lt; --> 
  7&lt;9
  <!-- 空格符：&nbsp; --> 
  在&nbsp&nbsp吗=在 吗 
  <!-- 版权符：&copy; --> 
  &copy; Copyright xxx公式版权所有

• a 超链接标签、img 图片标签

  <!-- a标签不加target默认为_self：直接在当前窗口打开，_blank：新建窗口打开 --> 
  <a href="http://www.baidu.com">百度一下</a> 
  <a href="http://www.baidu.com" target=_self>百度一下</a> 
  <a href=http://www.baidu.com target=_blank>百度</a> 
  <!-- img标签 --> 
  <!-- 图片路径可使用本地相对路径或超链接路径 --> 
  <img src="图片路径"> <img src="x.jpg" width=300px;height=90px> 
  <!-- width：定义显示宽度，height：定义显示高度 -->

• audio 音频标签、video 视频标签

  <!-- src:资源位置，本地相对或外链 -->
  <audio src="./video/1.mp3" controls></audio>
  <video src="./video/1.mp4" controls></video>

• 列表标签：ul、ol

  <!-- 无序列表 --> 
  <ul> <li>111</li> <li>111</li> <li>111</li> </ul> <br> <br> 
  <!-- 有序列表 --> 
  <ol> <li>222</li> <li>222</li> <li>222</li> </ol> 
  <!-- 有序字母显示 --> 
  <ol type=A> <li>3333</li> <li>3333</li> <li>3333</li> <li>3333</li> <li>3333</li> </ol>

• 表格标签

  <!-- 表格标签 table -->
  <table></table>
  <!-- th：表头（默认居中） -->
  <table>
  <th>表头xxx</th>
  </table>
  <!-- tr：行、td：单元格 -->
  <table>
  <th>表头xxx</th>
  <tr>
    <td>第一个单元格（除表头外）</td>
  </tr>
  </table>
  <!-- table属性：border：边框，cellspacing：边框间距，align：对其方式，width、height：宽、高 -->
  <table border=1 cellspacing=0 align=center width=80%></table>
  <!-- 合并单元格：colspan：合并列（左右合并）、rowspan：合并行（上下合并） -->
  <th colspan=5 >合并5列</th>
  <th rowspan=5 >合并5行</th>
  <!-- 课程表实例 -->
  <!-- 课程表 -->
  <table border=1 cellspacing=0 align=center width=80%>
  <th></th>
  <th colspan=5 align=center>课程表</th>
  <tr align=center>
  <td rowspan=5>上午</td>
  <td>星期一</td>
  <td>星期二</td>
  <td>星期三</td>
  <td>星期四</td>
  <td>星期五</td>
  </tr>
  <tr align=center>
  <td>综合实践活动</td>
  <td>数学</td>
  <td>语文</td>
  <td>数学</td>
  <td>语文</td>
  </tr>
  <tr align=center>
  <td colspan=5>课间操</td>
  
  </tr>
  <tr align=center>
  <td>数学</td>
  <td>语文</td>
  <td>语文</td>
  <td>校本课程</td>
  <td>劳动</td>
  </tr>
  <tr align=center>
  <td colspan=5>眼保健操</td>
  
  </tr>
  <tr align=center>
  <td rowspan=3>下午</td>
  <td>语文</td>
  <td>书法</td>
  <td>数学</td>
  <td>语文</td>
  <td rowspan=2>美术</td>
  </tr>
  <tr align=center>
  <td rowspan=2>体育与健康</td>
  <td>地方课程</td>
  <td>音乐</td>
  <td>学校课程</td>
  </tr>
  <tr align=center>
  <td>音乐</td>
  <td>英语</td>
  <td>体育与健康</td>
  <td>科学</td>
  </tr>
  </table>

• form 表单

  <!-- 
  action：提交位置URL,#:本地
  -----
  method：提交方式
     get：提交给当前页面，4kB（x=xxx显示提交）
     post  （url不显示提交，在协议head里）
  -----
  name=xxx（DB中的键名）
  -----
  单选框：radio
  复选框：checkbox
  <input type=xxx name=xxx(与DB中一致且本框内相同) value=提交值 >显示内容
  <input type=xxx name=xxx(与DB中一致且本框内相同) value=提交值 >显示内容
  <input type=xxx name=xxx(与DB中一致且本框内相同) value=提交值 >显示内容
  -----
  下拉框：select
  <select name=xxx >
  <option value=>xxx</option>
  <option value=>xxx</option>
  <option value=>xxx</option>
  </select>
  -----
  文本域：textarea
  <textarea></textarea>
  -->
  <!-- 实例 -->
  <form action=# method=post  >
  用户名<input  type=text name=username>
  <br><br>
  电话
  <input  type=text name=phone>
  <br><br>
  性别
  <input  type=radio name=sex value=male>男
  <input type=radio name=sex value=female>女
  <br><br>
  兴趣
  <input type=checkbox name=like vlaue=摸鱼>上班
  <input type=checkbox name=like vlaue=划水>加班
  <input type=checkbox name=like vlaue=吹牛>倒班
  <br><br>
  密码<input  type=password name=pass>
  <br><br>
  头像<input type=file>
  <br><br>
  留言：<textarea rows="5" cols="3"></textarea>
  <!-- 三行五列文本框 -->
  <br><br>
  <input type=submit value=注册>
  <!-- value：提交按钮显示文本 -->
  <br>
  </form>

  博客文章

• 好烦小窝https://www.fanwo.top/archives/818.html