2020-10-10

最新推荐文章于 2024-09-12 18:02:32 发布

qq_39660591

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量185

点赞数

分类专栏：入门篇文章标签： html

本文链接：https://blog.csdn.net/qq_39660591/article/details/109004620

版权

入门篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML初级入门总结

一、什么是HTML?

学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；
HTML标签即“HTML元素”；

二、HTML的基本结构
HTML基本结构
三、HTML的常用标签
1.一般标签有开始符号和结束符号
2.自闭和标签只有开始符号，没有结束符号
3. -注释符 &nbsp-空格符（网络特殊符）
在这里插入图片描述
四、各类标签元素

4.1 块元素和行内元素
1、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
2、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
3、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等
4.2 表格
合并行
合并列
4.3 图像
图片描述（给搜索引擎看）
绝对路径和相对路径
图片格式
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
4.4 超链接
“_self”和“_blank”的区别是： “_self”在当前窗口打开链接，“_blank”在全新空白窗口打开链接
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：①内部页面链接；②锚点链接；
4.5 表单
表单标签共有4个：、、和。其中和是配合使用的。
1）单行文本框
语法：

2）密码文本框
语法：

3）多行文本框
语法：
多行文本框内容
4.6 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="form1" method="POST" action="index.html">
        昵称：<input type="text"/><br/>
        密码：<input type="password"/>
        <input type="hidden" value=""/><br/>
        邮箱：<input type="text"/>
        <select>
            <option>qq.com</option>
            <option>163.com</option>
            <option>gdut.com</option>
        </select><br/>
        性别：
        <input type="radio" name="Question1" value="boy"/>男
        <input type="radio" name="Question1" value="girl"/>女<br/>
        兴趣：
        <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">旅游</label>
        <input id="checkbox2" type="checkbox"/><label for="checkbox2">摄影</label>
        <input id="checkbox3" type="checkbox"/><label for="checkbox3">运动</label><br/>
        个人介绍：<br/>
        <textarea rows="8" cols="28">毛扇指千阵，铁马踏冰河。</textarea><br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="注册"/><br>
        上传个人照片：<br/>
        <input type="file"/>
    </form>
</body>
</html>

展示效果：
在这里插入图片描述
4.7 多媒体
1.插入音频、视频和flash

注：
多媒体文件地址可以是相对地址，也可以是绝对地址。
width和height使用px作为单位。
2. 插入背景音乐

loop="2"表示重复2次，loop=“infinite"表示无限次循环播放，也可以使用loop=”-1"表示无限次循环播放。