由浅入深走入HTML，探索HTML的故事

最新推荐文章于 2024-06-14 07:44:22 发布

卡布奇诺的百宝箱

最新推荐文章于 2024-06-14 07:44:22 发布

阅读量125

点赞数

分类专栏：前端学习文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_35012875/article/details/127398673

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标题什么是网页，什么是网站？

当我们在浏览器上输入百度的网址的时候，我们看到的搜索界面，那个界面就是网页，当你输入词条点击搜索之后，会跳到百度的另一个界面，下面是一个搜索的列表，这个也是个网页，我们通常和别人聊天的时候，都是说我访问了某某网站，没有人会说我访问了某个网页对吧，那么网站的概念是什么那，多个网页组成了网站，也可以理解为，网站的组成单元是网页。

那么网页是用什么语言来写的那？每种语言的作用又是什么那？

我们想做网站，就必须从网页做起，写网页主要用到的编程语言有三个HTML,CSS,JS。网页的一般后缀名为.html 或者.htm ，写网站的时候，一个html文件就对应着一个网页。从这点上理解，html文件就是网页。下面讲解一下这三种语言的作用。
如果人分成几个部分，那么你们会怎么分？有些人说人可以分为上半身和下半身，有些人说可以分为灵魂和肉体，我想说的是，你们这么分是没有问题的，但是为了让大家更好的理解编程语言的分工，我把人分为，骨架，外貌，行为。 如果把HTML比作是人，那么HTML语言负责的就是骨架，CSS可以调整人的外貌，JS可以让人动起来。那么我们要想学习网页技术，那么我们一定要从骨架开始学起。

HTML基础知识

这里的编辑器有很多，建议大家用的编辑器VScode,webstorm这两款编辑器都很强大，用那种我觉得都可以。废话不多说，直接整起。
首先先进入我们的第一个案例讲起。首先先创建一个HTML文件。
在这里插入图片描述
当我们创建好之后，讲一下里面的标签是什么意思

<!DOCTYPE html>  可以理解为声明HTML是哪个版本，固定样式，不用过多关注
<html lang="en">  声明html中的内容是英文格式，与后面的搜索有关，但是这改成中文也没有多少影响
<head>            网页中的配置信息
    <meta charset="UTF-8">  声明编码格式为utf-8
    <title>html标签学习</title>  网页的标题
</head>
<body>  网页内容
</body> 像这种反斜杠的是表示标签结束的意思
</html>

介绍完基本结构后，我们开始编写html中常见的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html标签学习</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
    <hr>
    <p>段落标签 </p>
    <br /> 换行标签

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
    <hr>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
    <hr> 下划线标签
    <h4> 图像标签的使用:</h4>
    <img src="img.jpg"/>
    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="img1.jpg" alt="我是老师"/>
    <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
    <img src="img.jpg" title="我是老师思密达"  alt="我是老师"/>
    <hr>
    <h4> width 给图像设定宽度:</h4>
    <img src="img.jpg" alt="我是老师" title="我是老师思密达" width="500"/>
    <h4> height 给图像设定高度:</h4>
    <img src="img.jpg" alt="我是老师" title="我是老师思密达"  height="100"/>
    <h4> border 给图像设定边框:</h4>
    <img src="img.jpg" alt="我是老师" title="我是老师思密达"  width="500" border="15"/>

    <img src="img.jpg" /> 同一级下的路径
    <img src="images/img.jpg" /> 下一级下的路径


    <img src="C:\Users\apple\Desktop\前端基础第一天-HTML\案例\img.jpg" /> 绝对目录
    <img src="http://www.itcast.cn/2018czgw/images/logo.png" /> 绝对目录

    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>

<!--    表格标签-->
    <table>
        <tr><td>姓名</td>  <td>性别</td> <td> 年龄 </td></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
    <!--    合并单元格 -->
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>

    </table>

    <h4>您喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>

    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1</li>
    </ol>

<!--表单标签-->
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>

            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历:</td>
            <td><input type="text" value="博士后"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的
                <input type="checkbox" name="love" > 可爱的
                <input type="checkbox" name="love" > 小鲜肉
                <input type="checkbox" name="love" > 老腊肉
                <input type="checkbox" name="love"  checked="checked"> 都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册" >
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox"  checked="checked">    我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#" > 我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>

    </table>
</body>
</html>

HTML常用标签大概有这么多。大家多多熟悉一下，背下来，很重要

卡布奇诺的百宝箱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
由浅入深走入HTML，探索HTML的故事

当我们在浏览器上输入百度的网址的时候，我们看到的搜索界面，那个界面就是网页，当你输入词条点击搜索之后，会跳到百度的另一个界面，下面是一个搜索的列表，这个也是个网页，我们通常和别人聊天的时候，都是说我访问了某某网站，没有人会说我访问了某个网页对吧，那么网站的概念是什么那，多个网页组成了网站，也可以理解为，网站的组成单元是网页。
复制链接

扫一扫