HTML/CSS学习笔记二

学习笔记二

      • 超链接
      • 列表标签
        • 无序列表
        • 有序列表
      • web中的路径
        • 相对路径
        • 绝对路径
      • img标签
      • 表格标签
      • iframe 框架标签
      • 表单中常用的标签

超链接

a 标签是 超链接

  • href 属性设置连接的地址
  • target 属性设置哪个目标进行跳转
    • _self 表示当前页面(默认值)
    • _blank 表示打开新页面来进行跳转
<a href="http://localhost:8080">百度</a>
<a href="http://localhost:8080" target="_self">百度_self</a>
<a href="http://localhost:8080" target="_blank">百度_blank</a>

列表标签

无序列表

unorder line

<ul>
   <li>123</li>

 - List item

   <li>123</li>
</ul>

有序列表

order line

<ol>
   <li>1233</li>
   <li>123</li>
</ol>

web中的路径

相对路径

  • . 表示当前文件所在的目录
  • … 表示当前文件所在的上一级目录
  • 文件名 表示当前文件所在目录的文件,相当于 ./文件名

绝对路径

http://ip:port/工程名/资源路径

img标签

img 标签是图片标签,用来显示图片

  • src 属性可以设置图片的路径
  • width 属性设置图片的宽度
  • height 属性设置图片的高度
  • border 属性设置图片边框大小
  • alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
<img src="../imgs/1.jpg" width="10%" height="10%" border="1px" alt="missing">

表格标签

table 标签是表格标签

  • border 设置表格标签
  • width 设置表格宽度
  • height 设置表格高度
  • align 设置表格相对于页面的对齐方式
  • cellspacing 设置单元格间距

tr是行标签
th 是表头标签
td 是单元格标签

  • colspan 属性设置跨列
  • rowspan 属性设置跨行
  • align 设置单元格文本对齐方式

iframe 框架标签

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和 a 标签组合使用的步骤:
1.在 iframe 标签中使用 name 属性定义一个名称
2.在 a 标签的 target 属性上设置 iframe 的 name 的属性值

 <iframe src="3.标题标签.html" width="500" height="400" name="abc">
    </iframe>
    <ul>
        <li><a href="0-标签语法.html" target="abc">0</a></li>
        <li><a href="1.font标签.html" target="abc">1</a></li>
    </ul>

表单中常用的标签

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器

<form>
    用户名:<input type="text" value="123"/><br>
    用户密码:<input type="password" value="abc"/><br>
    确认密码:<input type="password" value="abc"/><br>
    性别:<input type="radio" name="sex" checked="checked"/><input type="radio" name="sex"><br>
    兴趣爱好:<input type="checkbox" name="hobby">Java<input type="checkbox" name="hobby"/>c++<br>
    国籍:<select>
            <option>--请选择国籍--</option>
            <option selected="selected">中国</option>
            <option>美国</option>
            <option>小日本</option>
         </select><br>
    自我评价:<textarea rows="10" cols="20">我才是默认值</textarea><br>
    <input type="reset">
    <input type="submit">
    <input type="button">
    <input type="file">
    <input type="hidden"><br>
    <input type="date">
</form>

运行结果:
HTML/CSS学习笔记二_第1张图片

你可能感兴趣的:(Tomcat学习实践过程记录)