HTML/CSS学习笔记二

超链接

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>

运行结果：