<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>title1</h1>
<h2>title2</h2>
<hr>
<font face="楷体" size="5" color="blue">
  hello world
</font>
<p>
    udwhexkiewjkixjd
</p>
<p>
    diuajkxisaldkwq
</p>
<b>
    粗体
</b><br>
<i>
    斜
</i><br>
<u>
    下划线
</u><br>
<img src="../img/a.jpg" width="200" height="300">
</body>
</html>

 

 超链接：

<a href="https://coding.imooc.com/class/chapter/132.html#Anchor">hi</a>

 

 

 

 

如果要让一个格子站两个格子，可以在th,tr里设置rowspan和colspan属性，使其等于2

 

 表格标签：

 

 

 

 

 

<table border="1" cellspacing="0" width="500">
    <!--表头-->
    <tr align="center">
        <th>name</th>
        <th>phone</th>
        <th>plan</th>
    </tr>
    <!--
    center就是把表格里的内容保持居中。
    下面是表格内容
    -->
    <tr align="center">
        <td>doudou</td>
        <td>32231</td>
        <td>dw</td>
    </tr>
</table>




布局标签：
div可以独自占一整行，span不换行。

 

 

 

 

 

表单标签：<form>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    <!--
    action:指定表单数据提交的URL.就是以后要往哪里提交数据，就指定这个路径
    表单项如果想被提交，也要指定name属性
    method:指定表单提交的方式
    1.get:默认值。请求参数会拼接在URL后面url长度限制4kb
    2.post:请求参数会在http请求协议的请求体中。请求参数无限制的
    -->
  <input type="text" name="username">
  <input type="submit">

</form>
</body>
</html>

效果：

 

<form action="https://www.baidu.com/s?wd">
            <input type="text" name="wd">
            <button>search</button>
        </form>
效果：action是百度的搜索url，下面input里的name和搜索url里的那个一样就可以得到在百度里搜索的效果。

 

 

 

 

表单项标签：

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!--
    label可以在填写内容的时候也同时选中这个标签
    将input和label联系起来就把id和for名字设置一样
      value是选了这个选项后提交的内容.name值加上就可以把选择的东西提交给后台
    -->
       <!--
      text框
      -->
     <label for="user">用户名</label>
    <input type="text" name=""username id="user"><br>

    <label for="password">密码</label>
    <input type="text" name="password" id="password"><br>
    <!--
     单选框radio.让两个输入框name一样就可以单选了
    -->
    <label>性别</label>
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender"  value="2" id="female"> <label for="female">女</label>
     <br>
    <!--
     复选框checkbox
    -->
    爱好
    <input type="checkbox" name="hobby" value="1">画画
    <input type="checkbox" name="hobby" value="2">滑雪
    <input type="checkbox" name="hobby" value="3">跳舞

   <br>

    <!--
   文件file
  -->
    头像
    <input type="file">

   <br>
    <!--
     文本域，可以写很多行数据
    -->
    个人介绍
    <textarea></textarea>

    <!--
   下拉列表select
  -->
     城市
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
<br>
    <!--
  按钮  提交按钮,重置，普通按钮
 -->
    <input type="submit" value="注册">
    <input type="reset" value="重新来">
    <input type="button" value="这是一个普通按钮">
</form>

</body>
</html>

 

列表：

无序列表，只有bullypoint这种的

 

 

<ul>
        <li>
            dodo
        </li>
        <li>nihao</li>
        <li>hh</li>
    </ul>
 
有序列表：

 

 

<ol>
        <li>
            dodo
        </li>
        <li>nihao</li>
        <li>hh</li>
    </ol>
 
嵌套列表：

 

 

   <ol>
        <li>
            dodo
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
        <li>nihao</li>
        <li>hh</li>
    </ol>
 
 
<hr>用来加一条线
<br>用来换行
 
 
label标签：label里的for和input里的id名字一样，就可以把他们联系起来。
<label for="username">username:</label>
        <input type="username" id="username">
效果如下图，点中这个username的字后可以选中输入框