html基础知识总结

单标签

< hr> 放在body标签里表示横线
< br> 在body标签里表示换行
注释符号
<img src = '1.jpg' title = '鼠标放图片上的文字提示' alt = ' 给搜索引擎看的' width = 500> 在body标签里插入图片为多媒体标签

双标签

<h1></h1>,,,<h6></h6> 在body里的标题标签
<p></p> 段落标签
<strong></strong> 文字加粗
<em></em> 斜体显示
<ins></ins> 文字加下划线或者<u></u>
<font color = 'red' size = 1>帅哥</font> 给文字加颜色和大小 size在10以内
<del>帅哥</del> 文字删除线
<div></div>和<span></span>在网页布局中用，但是没有语义

超链接

实现页面跳转使用a标签
<a href = 'https://www.baidu.com/' title = '超链接'>去找百度吧</a>
target 属性为_blabk表示在新窗口表示为_self表示在默认自身窗口打开
可以实现优化在head标签里<base target= '_blank'> 可以在后面不必重复写 target= '_blank'
title 属性表示鼠标放在文字内容那里提示内容
在href = ‘#’ 时跳转本页面
在标签里加id 属性把属性名字放#后面就是一个锚链接（回到顶部的使用）

image.png

特殊符号

表示空格
<p> 表示<p>

语义标签

<nav></nav> 表示导航的语义标签。<div></div>与他的用法相同
<header></header> 网页布局中头部与<div></div>作用相同
<footer></footer>网页布局中的尾部，与<div></div>作用相同
<article></article>表示文章，与<div></div>作用相同
<aside></aside>网页布局中侧边栏的部分，与<div></div>作用相同

列表

有序列表

image.png

效果

image.png
无序列表

效果

image.png

自定义列表

image.png

其中dd相当于上面的li
效果

image.png

多媒体

视频
<video></video>
video里的属性：src(路径）
controls （显示控制栏）
l loop(自动循环）
atuoplay(自动播放）
注意现在的chorm浏览器下autoplay属性没有用，必须要用户与之交互，亲测ie里面autopaly可以用，在chorm可以添加muted属性可以使视频文件变成静音的可以自动播放
或者以这种方式

image.png
音频
<audio src = '' controls loop autoplay></audio>
与视频标签一样也可以加width属性

link

image.png

表格（table）

image.png

效果

image.png

属性
border 加边框
width height 决定宽高
cellspacing 设置td与td之间的距离，默认值为2
th标签 自动设置表头

image.png

image.png

align 设置对齐方式
将align 属性设置到table标签时只会改变整个表格在浏览器界面的对齐方式

image.png

效果

image.png

becolor 设置背景色
花里胡哨的就不演示了
cellpadding ：设置内容与边框之间的距离放在table标签里
caption ： <caption><h3>人员信息表</h3></caption>设置表格标题的标签，为了加粗可以把里面的文字用标题标签加粗
效果图

image.png

表格的基本结构

<body>
    <table border = '1' width = '400' height = '500' cellspacing = '0' align = 'center' >
        <caption><h3>人员信息表</h3></caption>
        <thead>
            <tr> <!--行元素-->
                <th>姓名</th> <!--列元素-->
                <th>年龄</th>
                <th>籍贯</th>
            </tr>
        </thead>
        <tbody>
            <tr> <!--行元素-->
                <td>张三</td> <!--列元素-->
                <td>18</td>
                <td>公安</td>
            </tr>
        </tbody>
        <tfoot>
            <tr> <!--行元素-->
                <td>李四</td> <!--列元素-->
                <td>17</td>
                <td>章田</td>
            </tr>
        
        
    </table>
    
</body>

上述代码表示的才是正确的表格格式，一般那些thead tbody tfoot不用写

合并单元格

横向合并

colspan 属性横向合并注意把多出的列删掉
纵向合并

image.png

rowspan 纵向
效果

image.png

细线表格

image.png

效果

image.png

*注意把border属性去掉，要不然效果是这样的

image.png

表单（重点）

作用：收集用户填入数据
表单域 <form></form>
表单域属性：1.action 2.method (有get和post两个方法）
表单控件：1. 邮箱： <input type='text' maxlength='5' name='email' placeholder='请输入邮箱地址‘>

密码：<input type='password' maxlength='5' name='pwd' placeholder='请输入密码‘>
<input type='submit'> 提交按钮
<input type='checkbox' name='' checked>写代码
<input type='checkbox' name=''>学习
<input type='checkbox' name=''>看电影 多选框
<input type="radio" name='123' >男
<input type="radio" name='123'>女 单选框 name属性必须一样