Web前端基础—html

最新推荐文章于 2023-11-14 21:48:54 发布

Top Secret

最新推荐文章于 2023-11-14 21:48:54 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/m0_55196097/article/details/122445803

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.1.6 一个超简单的作业演示（初识style）

1. html简介

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>



</body>

</html>

HTML是英文HyperText Markup Language的缩写，即超级文本标记语言，是用于描述网页文档的一种标记语言。

HTML最初由蒂姆·本尼斯李（Tim Berners-Lee）于1989年在CERN（Conseil Europeen pour la Recherche Nucleaire）研制出来。考虑到人们使用的计算机差别很大，利用HTML格式将允许人们透明地共享网络上的信息，后来作为图文浏览器Mosaic的网页解释性语言，随着HTML的发展逐渐成了网页语言的标准。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，

HTML通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，告诉浏览器显示其中的内容。它的结构包括"头"部分和"主体"部分，其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。

HTML的标准由W3C负责开发和制定，W3C是World Wide Web Consortium

的缩写，即万维网联盟，万维网联盟是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

其主要特点如下： 　　

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。　　

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。　　

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上.

版本发表日期

HTML 2.0 RFC:1995年11月

HTML 3.2 1997年01月14日

HTML 4.0 1997年12月18日

HTML 4.01 1999年12月24日

HTML 5.0 2014年10月28日

1.1 常用标签介绍

例子1：

<body>

<div>

    <img src="宇智波鼬.jpg" alt=""width="200" height="200">

    <a href="https://www.baidu.com">百度</a>

    我是兰

    <div>我在广西贺州

    </div>

    <div>我为中国加油，我为武汉加油</div>

</div>

</body>

嵌套关系简便写法：div>div*2>div*3   然后按下Tab键
说明：

1.Div 在body里写，Div支持嵌套，按Tab键可以将其复制（如绿色样式）
2.img  在body中打img按Tab键，width和height设置图片大小（样式）
3.a 标签  <a href="https://www.baidu.com">百度</a> href表示网页
4. table标签 ，在body中打table按Tab键，加表头thead，Tab键，中间写个tr,注意缩进

<body>
<div>
    <img src="宇智波鼬.jpg" alt=""width="200" height="200">
    <a href="https://www.baidu.com">百度</a>
    <table>
        <thead>tr>td*3</thead> 按Tab即可 头文件
 <tbody>tr>td*3tbody>   以头文件的格式展开存储内容

    </table>
</div>
</body>

<table>
    <thead>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>序号1</td>
            <td>姓名1</td>
            <td>年龄1</td>
        </tr>
    <tr>
            <td>序号2</td>
            <td>姓名2</td>
            <td>年龄2</td>
        </tr>
        <tr>
            <td>序号3</td>
            <td>姓名3</td>
            <td>年龄3</td>
        </tr>
    </tbody>
</table>

1.1.1 input输入功能

F12

Span是设置输入框框 ：

<div><span>输入框1：</span><input type="text"></div>

<div><span>输入框2：</span><input type="password"></div>

<div><span>输入框3：</span><input type="checkbox"></div>

<div><span>输入框4：</span><input type="radio"></div>

<div><span>输入框5：</span><input type="button" value="按钮1"></div>

设置成输入密码时的*****，用password。偷看别人密码只要把password改成text就好了。

代码结果：（注：一个div代表一层或者说一行）

1.1.2 html的列表

再按Tab建可得如下列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

1.1.3 标题标签

标题标签 ，打h加Tab键：

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

1.1.4 分割线<hr/>

分割线<hr/>打hr加Tab键：

垂直分割线<hr style="width:12px;height:1000px;background-color: green;"/>

设置宽度与长度；设置背景色。

1.1.5 视频播放

<video src="作业点评.mp4" controls="controls"></video>

1.1.6 一个超简单的作业演示（初识style）

<body>
<h1>作业</h1>
<div style="width: 500px;height: 500px;background-color: rgba(0,255,102,0.4)"></div>
</body>

Line-height:500px高度居中。

Top Secret

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端基础—html

目录1. html简介1.1 常用标签介绍1.1.1 input1.1.2 html的列表1.1.3 标题标签1.1.4 分割线1.1.5 视频播放1.1.6 一个超简单的作业演示1. html简介<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t...
复制链接

扫一扫