HTML-特殊符号、注释、表单与表格

HTML-特殊符号、注释、表格与表单

1 特殊符号

1.1 空格( )

1.2 大于号(>)

1.3 小于号(<)

1.4 版权(©)

1.5 注册商标(®)

2 注释

程序不会执行的代码

ctrl+空格

3 表格

默认没有边框

3.1 表格标签(table)

3.2 行标签(tr)

3.3 列标签(td)

3.4 表格的属性

3.4.1 border

边框

3.4.2 cellspacing

边框之间的距离

3.4.3 cellpadding

边框与内容之间的距离

3.4.4 width

宽

3.4.5 height

高

3.4.6 align

位置属性, center居中 right 靠右

3.5 表格的结构

标题caption(只能用于表格中)、表头thead、表格主体tbody

注意: 将表头thead中的td换成th,文本就有了加粗居中的效果

3.6 合并单元格的步骤

1、先判断是跨行合并还是跨列合并
2、跨行合并用rowspan,跨列合并用colspan
3、把合并的属性写在第一个要合并的单元格上
4、把合并的行数或者列数写在对应的属性上
5、把多余的单元格注释即可

3.7 table布局的缺点

1、太深的嵌套，比如table>tr>td>h3，会导致搜素引擎读取困难，而且最直接的损失就是大大增加了冗余代码量
2、灵活性差，比如要将tr设置border等属性是不行的，得通过td
3、代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
4、混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱
5、不够语义

4 表单

4.1 表单标签(form)

4.1.1 action

提交的地址

4.1.2 method

提交的方式 Get POST

4.1.3 name

表单的名字

<form action="https://www.baidu.com" method="GET" name="form1">

4.2 表单域

4.2.1 标记标签(label)

作用：当label中for属性的属性值与input的属性值一样时，单击label可以获取焦点

获取焦点:当光标在输入框中时，能输入文本时

4.2.2 input控件标签

type:类型
value:输入框的值
name:名字
size:输入框的尺寸

4.2.2.1 文本框

type=“text”

<input type="text" id="user" value="李四" name="user" size="50">

4.2.2.2 密码框

type=“password”

<input type="password" id="pwd" name="pwd">

4.2.2.3 单选框

type=“radio”

当两个单选框的name的属性值一样时，才有单选效果

<input type="radio" name="sex"><span>男</span>
<input type="radio" name="sex" checked=true><span>女</span>

默认单选框的值

1、checked=“checked”
2、checked=true
3、checked

4.2.2.4 多选框

type=“checkbox”

<input type="checkbox" checked="checked"><span>打篮球</span>
<input type="checkbox"><span>打游戏</span>
<input type="checkbox" checked=true><span>游泳</span>

默认复选框的值

1、checked=“checked”
2、checked=true
3、checked

4.2.3 选择框

组合标签,类似于ul和li

<select name="" id="">
      <option value="">沧州</option>
      <option value="">石家庄</option>
      <option value="">邯郸</option>
      <option value="" selected>邢台</option>
</select>

默认选中选择框
1、selected=“selected”
2、selected=true
3、selected

4.2.4 多行文本框

多行文本框 ：textarea

cols:宽度
rows:高度

<textarea cols="50" rows="5">宝剑锋从磨砺出，梅花香自苦寒来</textarea>

4.3 提交按钮

<input type="submit" value="把信息提交到百度">

#### 4.2.4 多行文本框

多行文本框 ：textarea

cols:宽度
rows:高度

```html
<textarea cols="50" rows="5">宝剑锋从磨砺出，梅花香自苦寒来</textarea>