HTML简单入门

最新推荐文章于 2024-09-10 14:15:01 发布

no_name_sky

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/no_name_sky/article/details/117528222

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

html 文档结构

html是网页组成的结构部分，对内容的骨架搭建。其书写格式是标签形式，有双闭合和单闭合标签。

<!--第一行声明文档的类型，标记文档为HTML5的文件，必须进行此声明-->
<!DOCTYPE html>
<!--页面的根节点-->
<html lang="en">
<head>
<!--    head标签中包含头部的信息，是一个容器，可以包含style title meta script link 等-->
<!--    meta声明头部的元信息，对我们文档规定编码格式-->
    <meta charset="UTF-8">
<!--    显示网页的标题-->
    <title>Title</title>
<!--    link 链接css资源文件，网站图标-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
<!--    script 链接脚本js文件-->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
        .pub_info{
            margin-top:10px
        }
        .pub_info .glyphicon-comment{
            vertical-align: -2px
        }
        .pub_info .glyphicon-thumbs-up{
            vertical-align: -2px
        }
    </style>
</head>
<body>
浏览器页面显示的内容
</body>

head标签中内容

title

网页的标题

body中的内容

标题标签

定义标题，用适当的标签层级来构建文档的结构。不要使用标题标签来改变同一行中字体的大小，应当使用恰当的css来完成。
<h1>标题1</h1>只有h1-h6.

段落标签

和普通文本一样，可以通过css来设置段落的样式。
<p>这是一个段落</p>

超链接

可以把当前位置的文本或图片链接到其他页面。

target 指定实在当前页面展示跳转的页面(target="_self_")还是打开一个新的页面展示跳转页面(target="_blank_")。默认值是_sekf_。
title 指定鼠标移动到超链接上显示的标题
href 指定跳转的url或当前页面的标签id
<a href="www.baicu.com" target="blank" titlle="baidu">百度</a>

页面内部标签跳转：
<a href="#">跳转到顶部</a>
返回某个id的标签位置
<p id="p1">段落</p>  id是唯一的
<a href="#p1">跳转到p标签</a>

列表标签

ol 有序标签
ul 无序标签
li ol和ul标签下的一个列表元素

<ol>
	<li>1</li>
	<li>2</li>
</ol>

盒子标签 div

可定义文档的分区，可以把文档分割为独立的，不同的部分。下图是将网页划分为不同区域的展示：
在这里插入图片描述

<div>盒子</div>

图片标签 img

在网页中插入图片，是行内块标签。

标签的分类

块级元素，独占一行，可设宽高，如果不设置宽度，宽度为浏览器宽度。
行内元素，在一行内展示不能设置宽高，它的宽度根据行内内容填充
行内块元素，在一行内展示，可设宽高

span 标签

来组合行内元素,以便通过样式来格式化它们。

表格标签 table

td指表格数据tabe data, 即数据单元格的内容，数据单元格可以是文本(span)，图片(img)，列表(ol,ul)，段落(p,div)，表单(form)，水平线，表格等。

表格行和列的合并

rowspan 合并行
colspan 合并列

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table 标签学习</title>
</head>
<body>
<div class="table">
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>化学</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>化学</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>化学</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>化学</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>化学</td>
                <td>生物</td>
                <td>英语</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">课程表</td>
            </tr>
        </tfoot>
    </table>
</div>
</body>
</html>

展示：
在这里插入图片描述

表单标签 form

action 定义表单提交给服务器的地址
method提交数据的方式
表单控件：
form表单中的标签id经常是给llabel标签使用的，label标签的功能是将文本和form中的标签通过id绑定起来，实现点击文本和点击form标签是同一个效果。如：在注册时，点击输入框和输入框旁的用户名，焦点都会聚集到文本框上。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form学习</title>
</head>
<body>
<form action="">
    <p>
        <label for="user">用户名：</label>
        <input type="text" name="username" id="user" placeholder="请输入用户名">
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" name="password" id="pwd" placeholder="请输入密码">
    </p>
    <p>
<!--        单选框-->
        用户性别：
<!--        checked 表示默认选中此项，如果要产生互斥的效果，name的值要相同-->
        <input type="radio" name="sex" value="男" checked id="m"><label for="m">男</label>
        <input type="radio" name="sex" value="女" id="w"><label for="w">女</label>
    </p>
    <p>
<!--        复选框， name值保持一致，checked表示默认选中-->
        用户爱好：
        <input type="checkbox" name="checkfav" value="睡觉">睡觉
        <input type="checkbox" name="checkfav" value="玩游戏">玩游戏
        <input type="checkbox" name="checkfav" value="学习">学习
        <input type="checkbox" name="checkfav" value="运动" checked>运动
    </p>
    <p>
<!--        文件上传-->
        <input type="file" name="file">
    </p>
    <p>
<!--        文本域-->
        自我介绍：
        <textarea name="txt" id="userinfo" cols="30" rows="10"></textarea>
    </p>
    <p>
<!--        下拉列表，select设置size大于1为滚动列表，否则为下拉选择框, mutiple属性表示可以多选-->
        <select name="addr" id="addrress" size="3" multiple>
<!--            option 的属性，selected 默认选中,不设置默认选中第一个-->
            <option value="深圳">深圳</option>
            <option value="北京" selected>北京</option>
            <option value="西安">西安</option>
            <option value="上海">上海</option>
        </select>
    </p>
<!--    submit 功能固定化，负责将表中的数据提交给服务端-->
    <input type="submit" value="提交">
</form>

</body>
</html>