HTML标签学习笔记

• HTML标签学习笔记

1.标签是通过<p>定义的（<p></p>分别为开始标签和结束标签必须是成组出现）

段落通过<p>标签定义

（1）标签<p>每个独立一行

（2）标签<span>是一行，取决于里面内容的宽度(span行内元素左右排列))

2.链接是通过<a>定义的(a标签是行内元素)

 每点击一次都是打开一个新的网页在head标签里面<base href="" target="_blank">

锚点链接：找到当前页面自己想看的一部分

(1)实现页面跳转同时实现锚点跳转

当前页面：
<a href="b.html#aaa">跳转到b页面aaa处</a>
另一页面：
<a name="aaa" id="aaa">aaa</a>

3.插入图片（相对路径）并设置其高度宽度

(img行内元素左右排列)

<img src="/images/logo.png" width="258" height="39" />

4.标题是通过<h>标签定义的，h1是最大标签，h标签是在a标签里面

注:align是对齐属性。它的值可以是left、center、right，分别表示靠左、中、右，肯定效果是不同的，当然，如果要对齐的内容和容器大小相同，比如你加在里面的图片宽度和窗口相同，那么对齐就没有区别，否则是有区别的

5.标签<hr>用于在页面创建水平线

6.HTML注释 ctrl+/

7.<!-- 不产生新的空格换行 -->

<p>懒洋洋<br>在睡觉</p>

8.HTML列表元素

1. 无序列表<ul>

• 列表项item必须嵌套在li标签里面
• 如有<a>或者<img>标签可以将其写在li标签里面
• type属性，可以更改运行结果中前面的图形。disc点，square方块，circle圆，none无
• 
• （2）有序列表<ol>
• type属性，可以更改运行结果中前面的数字类型。A大写字母，I大写罗马数字，a小写字母，i小写罗马数字
• 

• Start属性定义序号开始的位置
• 
• 
• (3)定义列表<dl>
• 内部可以有多个列表标题，列表标题用<dt>标签定义
• 列表项内部有多个可以用<dd>标签定义
• 9.HTML表格元素
• （1）行tr，列td
• (2)Table里面属性 边框border,内边距cellpadding，外边距cellspacin
• 
• 

注：bgcolor是用于设置元素的背景颜色的属性。

1. td有两个属性

colspan单元格跨行 rowspan单元格跨列

(4)定义表格标题

<caption>标题</caption>

10.HTML表单元素

（1）单行文本框

<input type="text" name="user" id="user" value="javas" placeholder="请输入用户名">

（2）密码输入框

<input type="password" name="psd" id="" placeholder="请输入密码">

（3）单选按钮

<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>

        <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>

（4）多选按钮

        <!-- checked默认选中 属性和属性值一致时候可以直接写属性-->

        <input type="checkbox" name="hobby" value="shi" id="" checked>网球

        <!-- checked默认选中 -->

        <input type="checkbox" name="" id="" checked="checked">乒乓球

        <input type="checkbox" name="" id="">足球

（5）重置按钮

<!-- 重置 -->

        <input type="reset" name="" id="">

（6）图片形式提交按钮

<!-- 图片提交按钮 src -->

        <input type="image" name="" id="" src="../img/111.jpg" height="50" width="50">

（7）选择文件控件

<!-- 选择文件 -->

        <input type="file" name="" id="">

注意：input对应两个属性值name，value从这两个参数获取

<!-- 类型 文本输入框  value一开始就有值，控制文本框本内容  placeholder无内容是提示的信息-->

        <input type="text" name="user" id="user" value="javas" placeholder="请输入用户名">

        <input type="password" name="psd" id="" placeholder="请输入密码">

（8）select定义列表(下拉框，size设置选择栏高度，multiple决定多选列表还是单选列表)

Option定义列表项

<select name="" id="" multiple="">

            <option value="">1</option>

            <option value="">2</option>

            <option value="">3</option>

        </select>

如果想让哪一个默认选中可以checked=”checked”或者checked

<!-- checked默认选中 -->

        <input type="checkbox" name="" id="" checked="checked">乒乓球

(9)textarea标签中cols和rows定义文本框列数和行数

 <!-- 区域 -->

        <textarea name="" id="" cols="30" rows="10" placeholder="aaaa"></textarea>