HTML

Posted 2021-09-09 Steady_Man

1.html的基本语法规范

1. 在html中标签是成对的
2. 标签的属性和值尽量都用小写

2.HTML标签

1. 文本标签

标题:<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>展示完标题后会自动换行
段落：<p>里面的内容为一个段落</p>.换行是<br> >横线<hr>

2. 链接标签：a标签

<a name = "为标签设置名字" href="跳转地址">可以是文字，也可以是图片（<img src = "图片地址">）</a>

3. 多媒体标签

图像标签<img src="图片地址 >
src="图片地址
alt:如果图片无法加载，显示alt里面的文字
title：鼠标放置在图片上显示的文字
加载图片的路径有三种：

    （1）互联网路径
    （2）绝对路径 ： 带盘的路径，不推荐
    （3）相对路劲 ： 强烈推荐，相对于当前的HTML文件的路径。。。当前文件夹：./(可省略).当前文件的父文件夹：../

4. 音频和视频的标签

音频或者视频：
<Object data="xxx.mp3"></Object>
<Object data="xxx.mp4"></Object>
<embed data="xxx.mp3或者xxx.mp4>
在html5中音频标签
<audio controls="controls">
<sources src = "xxx.mp3" type="audio/mp3">
</audio>
controls:是否有播放的控制器
在html5中视频标签
<vidio controls="controls">
<sources src = "xxx.mp4" type="vidio/mp4">
</vidio>

5. 列表和表格

（1）列表
无序列表ul

<ul>
<li><li>
<li><li>
</ul>

有序列表

<ol>
<li><li>
<li><li>
</ol>

定义列表

<dl>
  <dt></dt>//关键字
  <dd></dd>//描述
</dl>

（2）表格

<table></table> //定义表格结构
<caption></caption> //定义表格标题
<th></th> //定义表头
<tr></tr> //定义表格行
<td></td> //定义表格单元格
//例子：
<h3>=========表格=========</h3>
    <table border="1px">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>95001</td>
                <td>张三</td>
                <td>男</td>
                <td>1990-10-10</td>
                <td>13412344321</td>
            </tr>
            <tr>
                <td>95002</td>
                <td>李丽</td>
                <td>女</td>
                <td>1991-10-10</td>
                <td>12987651234</td>
            </tr>
        </tbody>
    </table>

6. 表单

action:为表单提交地址
type = "radio"：是单选框
type = "checked"：是复选框
<textarea name="saymyself" rows="10" cols="30">：多行文本框
<select>
            <option>上海</option>
            <option>北京</option>
            <option selected>深圳</option>
            <option>重庆</option>
 </select>:下拉框
 type="submit"：按钮
 
 表单数据存储到form Date中
 -------------------------------------------------
<form method="POST" action="">
        <label>用户名:</label>
        <input type="text" name="username" size="20"/>
        <br>
        <label>密码:</label>
        <input type="password" name="password" size="20"/>
        <br>
        <label>性别:</label>
        <input type="radio" name="gender" value="1" checked/>男
        <input type="radio" name="gender" value="2" />女
        <br>
        <label>爱好:</label>
        <input type="checkbox" name="hobby" value="">旅游
        <input type="checkbox" name="hobby" value="">看书
        <input type="checkbox" name="hobby" value="">羽毛球
        <input type="checkbox" name="hobby" value="">游泳
        <br>
        <label>个人介绍:</label>
        <textarea name="saymyself" rows="10" cols="30">

        </textarea>
        <br>
        <label>地区:</label>
        <select>
            <option>上海</option>
            <option>北京</option>
            <option selected>深圳</option>
            <option>重庆</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>