「HTML」基础

最新推荐文章于 2023-03-06 17:15:50 发布

油炸冰可乐

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量207

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Wang_Pro/article/details/107456678

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML基础概念与应用

1. Web结构

2. HTML的标签

3. 标签与标签之间的关系

4. 实例演示

Web结构

一个成熟的web可以划分为三个组成部分，它们分别是：

结构、骨架（HTML）：对网页元素进行整理和分类
表现、样式（CSS）：设置网页元素的版式、颜色、大小与外观
行为、交互（JavaScript）：动画效果

在开发时，一般普遍的做法是让他们三者相分离，需要注意的是，web是web，浏览器是浏览器，通过浏览器这个工具，我们可以正常的访问web，同时，每一款浏览器都有属于自己的内核，web标准是由W3C组织制定的一系列集合。

HTML的标签元素

标题元素 h(1-6)
标题元素以h开头，由h1到h6，样式逐渐变小，独占一行
段落元素p
段落可以起到换行的作用，需要将它区分的标签是br，他们之间的共同点在于都可以执行换行，它们之间的区别在于行距，br标签为强制换行，换行是不产生行距，可以在p标签内使用br标签，不会产生新的标签这里有两个链接例子 br例子1 p标签例子2
文本格式化
加粗、斜体、下划线、删除线
链接 a href=“url”
盒子标签div 与 span
同样都是盒子标签，但是它们的区别在于 div 是块标签， span 是行标签。
图像标签
其中又会有必须属性，非必须属性
锚点链接
可以进行快速定位的链接，类似目录
表格标签 table
其中嵌套行标签tr ，行内标签td，另外还有：colspan行合并标签，rowspan列合并标签，合并的单元格确定时，指定所在的单元格数字即可
有序列表
ol标签内嵌套li
无序列表
ul列表嵌套li
表单元素form
用于收集不同类型的用户输入,主要属性有type( text | radio | checkboxes | submit )，name
下拉表单
通常，这个与ajax技术练习紧密

标签与标签之间的关系

标签与标签之间主要分为两类关系：

包含（父子关系、继承关系）
并列（兄弟关系，同级关系）

关系在HTML中的结构模块体现较少，例如有序列表、无序列表中，但是以后这两类关系在CSS的选择器中体现明显，可以利用这种包含关系精确选择器的作用对象。

并列关系通常可以把它当作网页布局中常见的盒子模型，并列关系通常采用模块化的思想帮助我们布局网页元素，例如小米官网的左侧是商品分类的导航栏，右大侧是和用户进行交互的商品推荐，下侧则是官网商品热卖推荐

实例演示

实例演示内容为骚气pink老师推荐的婚恋注册网站结构练习，官网是这样的：
我做出来的是这样的：
我做的
有两个图片我嫌找着麻烦，每找图片，写了两个链接；在最高学历（value=“幼儿园”）、婚姻状况（checked=“checked”）、其他信息中（textarea），网页包含了初始信息，整个的框架是做在一个表格里，它的最原始样子是这样的：

只不过设置border=“0”，就看不见内外边框了，最后一项的我承诺那里，其实就是设置一个行标签tr，在行标签中设置两个行内标签td，让其中一个空着，在另一个中定义标题和无序列表，代码如下：

<!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>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <!-- 第一行单元格 -->
    <table width="500" border="1">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"><img src="#"> 男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="#"> 女</label>
            </td>
        </tr>
        <!-- 第二行单元格 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--年--</option>
                    <option>2001</option>
                    <option>2000</option>
                    <option>1999</option>
                    <option>1998</option>
                </select>
                <select>
                    <option>--月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <select>
                    <option>--日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>6</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"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登陆</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>抱着严肃的态度</li>
                    <li>年满18岁、单身</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>

    </table>
</body>

</html>

油炸冰可乐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
「HTML」基础

HTML基础概念与应用1. Web结构2. HTML的标签3. 标签与标签之间的关系4. 实例演示Web结构一个成熟的web可以划分为三个组成部分，它们分别是：结构、骨架（HTML）：对网页元素进行整理和分类表现、样式（CSS）：设置网页元素的版式、颜色、大小与外观行为、交互（JavaScript）：动画效果在开发时，一般普遍的做法是让他们三者相分离，需要注意的是，web是web，浏览器是浏览器，通过浏览器这个工具，我们可以正常的访问web，同时，每一款浏览器都有属于自己的内核，w
复制链接

扫一扫