常用标签
- 如何进行段落换行
这里展示两种，第一种新建一个行内标签<p>达到换行的效果，第二种是利用<br>进行换行，代码如下：
<body> <h3>新建p标签换行</h3> <p>iDestro is very good!</p> <p>Of course!</p> <h3>利用br标签换行</h3> <p> iDestro is very good! <br> Of course! </p> </body>
运行效果如下：
可以发现<p>标签两行的默认间距比<br>的默认间距大得多，所以一般直接采用<br>标签来换行，且比较快。 - 如何添加下划线
直接使用<hr>标签即可，代码如下：<body> <h3>生成水平线</h3> <hr> <hr> <hr> <hr> <hr> <hr> </body>运行效果如下：
- 如何修改字体样式
<font> 标签规定文本的字体外观、字体尺寸和字体颜色。不要使用该元素，请使用 CSS 向元素添加样式。
<b>标签，给文字加粗。
使用CSS样式直接修改字体样式：
代码：.describe { /*前面是字体族名称 最后一个是类族名称 浏览器在显示字体的时候，依次判断是否支持当前的字体，知道最后的字体系列*/ font-family: "仿宋","宋体",sans-serif; /*bold加粗 bolder深度加粗 lighter细体（100-900）*/ font-weight: bold; /*font-size字体大小 取值：1、具体的px值 2、百分比（默认字体大小16px）*/ font-size: 150%; /*font-style字体斜体*/ font-style: italic; color: red; /*opacity 透明度（0是全透明）*/ opacity: 1; font-size: 30px; /* line-height行高：单行字体占用的高度 */ line-height: 45px; /*justify 两端对齐 left=start：左对齐（默认）right=end：右对齐 ceenter: 居中对齐*/ text-align:justify; /*letter-spacing:控制字符间距（px normal）*/ letter-spacing: normal; /*文本修饰 下划线underline 中划线line-through 上划线over*/ text-decoration: none; /*三者配合使用：不换行，以...的形式显示 (三个属性配合使用实现单行超出文本隐藏)*/ /*overflow: hidden; !*处理超出显示屏的内容隐藏*! white-space: nowrap; !*不换行*! text-overflow: ellipsis; !*截取还是以...的方式显示*!*/ /*文本阴影颜色 x方向的偏移 y方向的偏移 阴影的颜色*/ text-shadow: 2px 2px #f2e78d; /*文本描边 描边的宽度 描边的颜色*/ -webkit-text-stroke: 2px #ff7292; /*首行缩进*/ /*em：相对的字符单位（2倍的字体大小）*/ text-indent: 2em; }运行的效果：
- 如何在网页中显示一张表格
<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。
在 HTML 5 中，不支持 <table> 标签的任何属性。
1.简单表格样例
代码：<table border="1px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>效果：
2.表格中的标题
代码：<table border="1px"> <tr> <th>Q</th> <th>E</th> <th>R</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>效果：
3.带有标题的表格
代码：
<table border="1px"> <caption>iDestro</caption> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>效果：
4.空单元格
代码：<table border="1px"> <tr> <td> </td> <td> </td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>效果：
5.跨行或跨列的单元格
代码：
<table border="1px"> <tr> <td rowspan="3">iDestro</td> <td colspan="2"> </td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>效果：
6.表格嵌套
<table border="1px"> <tr> <td> <table border="1px"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </td> <td></td> </tr> <tr> <td>一</td> <td>二</td> </tr> </table>效果：
7.单元格填充(Cell padding)
<!-- 没有设置cellpadding --> <table border="1px"> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </table> <br> <br> <br> <!-- 设置了cellpadding --> <table border="1px" cellpadding="8px"> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </table>效果：
8.单元格间距(Cell spacing)
<!-- 没有设置了cellspacing --> <table border="1px"> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </table> <br> <!-- 设置了cellspacing --> <table border="1px" cellspacing="10px"> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </table>效果：
- input标签
<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.文本域(Text fields)
代码：
效果：<form action=""> 姓：<input type="text" name="firstname"> <br> 名：<input type="text" name="lastname"> </form>
2.密码域
代码：
效果：<form action=""> 账号： <input type="text" name="user_name"> <br> 密码： <input type="password" name="pwd"> </form>
3.复选框
代码：<form action=""> 我喜欢自行车 <input type="checkbox" name="bike"> <br> 我喜欢汽车 <input type="checkbox" name="car"> </form>效果：
4.单选按钮
代码：
<form action=""> 男性: <input type="radio" name="sex" checked="checked" value="male"> <br> 女性: <input type="radio" name="sex" value="female"> </form>效果：
5.简单的下拉列表
代码：
<form action=""> <select name="" id=""> <option value="volvo">Volve</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>效果：
6.文本域（textarea）
代码：
<form action=""> <textarea name="" id="" cols="30" rows="10"></textarea> </form>效果：
7.创建按钮
代码：
<form action=""> <input type="button" value="Hello world"> </form>效果：
8.围绕的Fieldset
代码：
<form action=""> <fieldset> <legend>健康信息</legend> 身高：<input type="text"> <br> 体重：<input type="text"> </fieldset> </form>效果：
9.带有输入框和确认按钮的表单
代码：
<form action=""> First name: <br> <input type="text" name="firstname" value="Mickey"> <br> Last name: <br> <input type="text" name="lastname" value="Mouse"> <br> <input type="submit" value="Submit"> </form>效果：
客户机和服务器之间进行请求-响应
- GET
- POST
- 区别
