html 基础

html

一.

(1).基础标签

 <h1>标题标签</h1> 
    <h2>h标签有h1~h6</h2> 
    <h3>h1最大，h6最小</h3> 
    <h4>每一个h标签都独占一行</h4>
    <h5>h标签默认都是加粗的</h5> 
    <h6>h1标签不要随便用，它对于页面有特殊意义</h6>  
    <p>
        p:段落标签 <br>
        会自动换行，段落之间会有间隙
    </p>
    <hr> 分隔符
    <!--注释：解释代码。相当于笔记
    img:图片
    src:文件存放的位置
    alt:图片加载失败时的提示
    height:高度
    width:宽度
    px:像素，尺寸单位
    高度，宽度，只写一个，或者要等比例缩放，否则会造成图像失真
    title:鼠标悬停时，进行提示
    -->

(2).文本格式化标签

<p>这是普通文本</p>
    <p>
        <b>加粗</b> <strong>加粗</strong> <br>
        <u>下划线</u> <ins>下划线</ins><br>
        <i>倾斜</i> <em>倾斜</em><br>
        <s>删除</s> <del>删除贯穿</del><br>
        建议使用后边的标签
    </p>

(3).超链接

	<!--href:跳转到网页-->
    <!--1.跳转到外部网站 -->
    <!--2.跳转到自己的页面 -->
    <!--3.锚链接 -->
    <p>
        1.创建锚点 给任意一个标签一个id属性或者name属性
        2.使用超链接，href="#id"或者href="#name"
    </p>

(4).多媒体

 <!-- 注释：ctrl+/ 解释代码 -->
    <!--音频，视频必须添加控件才能播放
    controls:播放控件
    autoplay:自动播放，部分浏览器不支持
    loop:循环播放
    -->
    <audio src="img/music.mp3" controls loop autoplay></audio>
    <hr>
    <video src="img/mda-peh7qqcz1jyem7d4.mp4" controls loop autoplay height="500px"width="800px"></video>

二.

(1).table表格

 <!--table表格
    tr行
    td 单元格
    border:边框
    height="300px" width="500px"
    不推荐使用高和宽的属性，推荐使用css

    tr可以设置行的高度，不能设宽度
    td可以设置宽和高
    -->
    <table border="1">
        <tr height="100px">
            <td width="100px">序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>1</td>
            <td>齐</td>
            <td>女生</td>
            <td>18</td>
            <td>是个人</td>
        </tr>
        <tr>
            <td>2</td>
            <td>玉</td>
            <td>女</td>
            <td>18</td>
            <td>是个人</td>
        </tr>
    </table>

(2).表格合并

 <!-- 合并单元格
    colspan:跨列合并
    rowspan:跨行
     -->
    <table border="1" width="500px" height="500px">
        <tr>
            <td colspan="2">1.1 1.2</td>
            <!-- <td>1.2</td> -->
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td rowspan="2">2.5 3.5</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <!-- <td>3.5</td> -->
        </tr>
        <tr>
            <td colspan="2">4.1 4.2</td>
            <!-- <td>4.2</td> -->
            <td>4.3</td>
            <td>4.4</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td colspan="2">5.1 5.2</td>
            <!-- <td>5.2</td> -->
            <td>5.3</td>
            <td>5.4</td>
            <td>5.5</td>
        </tr>

(3).表单

<!--

action:提交的url地址（位置）
method:提交的方式,get,post
表单元素：
文本框：<input type="text" name="user"/>
密码框：<input type="password" name="pass"/>
提交按钮：能提交数据：<input type="submit"value="提交表单"/>
name名称必须是一致的:checked表示默认选中
--> 
<form action="http://www.baidu.com" method="get">
<!--文本框，用于输入信息（账号，住址，身份证号码。电话...之类）-->
用户名：<input type="text" name="user" />
<br/>
<!--密码框-->
密码：<input type="password" name="pass"/>
<br/>
<!--单选按钮-->
性别：<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女
<br/>
<!--下拉列表-->
学历：
<select>
    <option value="小学">小学</option>
    <option value="中学">中学</option>
    <option value="大学">大学</option>
    <option value="研究生">研究生</option>
</select>
<br/>
评价：
<br/>
<!--文本区域:文本内容比较多的时候实用-->
<textarea rows="10" cols="30" placeholder="请输入评价"></textarea>

<br/>
<!--复选框-->
爱好：
<input type="checkbox" value="体育"/>体育
<input type="checkbox" value="音乐"/>音乐
<input type="checkbox" value="美术"/>美术
<br/>
<input type="submit" value="提交表单"/>
</form>