前端之HTML

html的常见标签

编写一篇博客

<h1> ...</h1> ：一级标题
<h2> ...</h2> ：二级标题
<h3> ...</h3> ：三级标题
<h4> ...</h4> ：四级标题
<h5> ...</h5> ：五级标题
<h6> ...</h6> ：六级标题
<p> ... </p>：段落标签，文字会独占一行
<i> ... </i>：文字斜体
<b> ... </b>：文字会出现加粗效果
<br>：换行标记
<hr> ：水平线
 ：网页显示一个空格

编写一篇博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>论数学的重要性</h1>
        <i>2019.11.09</i>
        <hr />
        <p>
            今天我打电话叫了个12寸的披萨
        </p>
        <p>
            服务员告诉我
        </p>
        <p>
            12寸没有了，换两个6寸行不行
        </p>
        <p>
            我说可以
        </p>
        <p>
            最后发现我亏了，这个故事告诉我们，<b>数学很重要！</b>
        </p>
    </body>
</html>

效果：

编写一篇博客

百度新闻列表

<a href = "...">xxx</a> ：超链接
<img src = "..." /> ：图片
无序列表：

<ul>
  <li>
      列表项目
  </li>
</ul>

有序列表：

<ol>
  <li>
      列表项目
  </li>
</ol>

<ol>标签属性

type="1" 数字排序
type="a"和type="A"字母排序
type="i"和type="I"罗马数字排序

百度新闻列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百度新闻列表</title>
    </head>
    <body>
        <h1>广州新闻&nbsp;<img src="../img/1.png" /></h1>
        <ul>
            <li>
                <a href="http://pc.nfapp.southcn.com/38/2788354.html">广州发布最新文化发展报告，人均文化消费涨了200</a>
            </li>
            <li>
                <a href="http://pc.nfapp.southcn.com/38/2788358.html">太燃了！法语音乐剧《摇滚红与黑》广州上演</a>
            </li>
        </ul>
        <ol>
            <li>
                <a href="http://pc.nfapp.southcn.com/38/2788354.html">广州发布最新文化发展报告，人均文化消费涨了200</a>
            </li>
            <li>
                <a href="http://pc.nfapp.southcn.com/38/2788358.html">太燃了！法语音乐剧《摇滚红与黑》广州上演</a>
            </li>
        </ol>
    </body>
</html>

效果：

百度新闻列表

图片标签的使用

<img>标签属性

src：源地址
title：鼠标放上去时显示
alt：图片加载失败时显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="../img/1.jpg" height="300px"/>
        <img src="../img/2.jpg" height="300px"/>
        <img src="../img/3.jpg" height="300px"/>
    </body>
</html>

图片默认从左往右排列，排列受最大的图片宽度和高度影响。
给图片标签只设置width或height属性，就会自动按照图片比例缩放。如果width和height同时设置，可能会导致图片变形。

图片标签的使用

补充

<del> ... </del>给文字添加删除线
<sup> ... </sup>给文字变成上标
<u> ... </u>给文字加下划线
<center> ... </center>把文字居中

表格

<table> ... </table>表格
<tr> ... </tr>表示一行
<td> ... </td>表示单元格
<col>代表一列
属性:

border="1px"表格边框属性
cellspacing="0"单元格空隙
align="center"对齐方式

合并水平单元格：其实就是让一个单元格占多个基本单元格的大小colspan属性

表单提交

<form> ... </form> action属性表示提交地址
<input />：

所有提交的数据由input指定,必须设置name属性;
input按钮的文字由value属性表示；
input必须放在form标签内才能提交

<input>标签常见类型

type="text"文本输入框
type="password"密码输入框
type="radio"单选框
type="checkbox"复选框
type="button"普通按钮
type="submit"提交按钮
type="reset"重置按钮
type="file"文件选择框

form表单get请求和post请求

get请求通常表示获取数据
post请求通常表示提交数据
get请求发送的数据都写在地址栏上，用户可见
post请求发送的数据用户不可见
get请求不能提交大量数据，post可以，不要混用