javaweb28天之HTML

1、文本标签

<h1>一般用于标题，从h1到h6字体不断变小</h1>
<p>一般用于书写文章，每一段用p标签包着，可以起分段的作用</p>
<div>经常会用到的盒子标签，想做好看舒服的界面必不可少，宽一般为浏览器长度可可以给定，要给定高</div>
<i>斜体字</i>
<br/>//换行符

2、列表标签

<div>
    <!--可用系统给定的-->
 <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

    <!--也可以自定义-->
    <dl>
        <dt>
        <dd>hello world</dd>
        <dd>hello world</dd>
        <dd>hello world</dd> 
        </dt>
    </dl>
</div>

3、图片标签

<img src="路径 " alt="若图片路径不对或者不存在显示出来的文字">

关于路径：如果在同一级就直接图片的名字+后缀，若不在同一级就 ..回到上一级，如下图片路径 也可以从根目录写文件的路径

如果在网页上的图片，可以写网址。

4、超链接标签

    <ul>
        <li><a href="https://baijiahao.baidu.com/s?id=1670159179366582702&wfr=spider&for=pc">疫情之下，他们用行动践行中国精神</a></li>
        <li><a href="#">体验javascript的魅力</a></li>
    </ul>

 超链接和文本图片标签的路径类似，不过超链接可以是直接写的html文件，可以是网上的网址，如果还没想好写什么用#代替

5、表格标签

table表格标签 tr行 td列，可以用rowspan colspan合并单元格。

<table border="1" cellpadding="15" cellspacing="0" align="center" style="margin-top: 50px">
    <caption style="color: darkviolet; font-size: 30px">这里写标题</caption>
    <tr>
        <!--跨列-->
        <td colspan="4" align="center" style="background-color: darkviolet">学生信息</td>
    </tr>
    <tr style="background-color: aqua">
        <td>01</td>
        <td>哈哈</td>
        <!--跨行 rowspan="行数"-->
        <td rowspan="3">女</td>
        <td><a href="#">湖北</a></td>
    </tr>
    <tr style="background-color: bisque">
        <td>01</td>
        <td>哈哈</td>
        <td>湖北</td>
    </tr>
    <tr style="background-color: coral">
        <td>01</td>
        <td>哈哈</td>
        <td>湖北</td>
    </tr>
</table>

6、表单提交

<form action="#" >
姓名：<input type="text" name="name"><br>
密码：<input type="text" name="pwd"><br>
 <input type="submit" value="提交">
 <input type="reset" value="重填">
</form>

action是表单提交后要跳转的页面，可以先用#代替

提交之后可以在网页上方出现name=“你输入的值”  pwd=“你输入的值”

7、表单项标签 

 //单选框
 <td>
        <select name="pro" id="pro">
            <option value="">湖北</option>
            <option value="">浙江</option>
        </select>
 </td>
//复选框
 <td>
        <input type="checkbox" name="hobby" value="read">读书
        <input type="checkbox" name="hobby" value="flower">插花
        <input type="checkbox" name="hobby" value="sing">唱歌
 </td>
//选择文件
 <td>
           <input type="file">
 </td>
//原点形状的单选框
 <td>
            男<input type="radio" name="sex" />
            女<input type="radio" name="sex" checked="checked" />
 </td>
//输入密码框
   <td class="input">
           <input type="password" name="pwd" maxlength="6">
   </td>
//输入多行文本框
   <td>
           <textarea style="width: 250px;height: 80px; color: yellow;"><!-- 不支持富文本 -->
           </textarea>
   </td>
//重置
  <td>
           <input type="submit" value="重填" >
   </td>
//提交
   <td>
           <input type="reset" value="提交">
   </td>

如果想对html和css有熟练的掌握，可以看这个视频，老师讲的挺仔细的，练习也很多 

网盘资源：    https://pan.baidu.com/s/1vpJveL4rFx5ci5PwOwdZYA 提取码:q5zb