前端-常用HTML基础篇

HTML

介绍:

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

由来:

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

发展历程:

HTML历史上有如下版本:
①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 
②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 
③HTML 3.2:1997年1月14日,W3C推荐标准。 
④HTML 4.0:1997年12月18日,W3C推荐标准。
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
⑥HTML5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
 
常用操作:
table1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>python3</title>
</head>
<body>
<!--段落-->
<p>这个是一个普通段落,不会换行
第二行</p>


<!--标题-->
<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<h7>7只有6级标题</h7>


<!--换行br-->
<p>自2013年开始,连续7年全国两会,***每年都会到6个团组参加审议、讨论。<br>2020年全国两会因疫情影响会期缩短至8天,***“下团组”次数也减少到4次。</p>


<!--水平分割线hr-->
<h1>AI看两会</h1>
<hr>


<!--块标签div,表示一块 可以放置任何内容-->
<div style="height: 80px; 150px;background-color: aquamarine">div标签
<h6>6级标题</h6></div>
<div style="height: 80px; 150px;background-color: bisque">两个div之间会自动换行</div>

<!--span:行内块元素-->
<span style="background-color: aquamarine">行内元素</span>
<span style="background-color: blueviolet">两个span之间不会换行</span>

<!--em、strong:表示强调,表示比较重要-->
<!--i、em:行内元素,字体倾斜,行内元素不会换行-->
<i>python</i>
<em>python1</em>


<!--b、strong:字体加粗-->
<b>python2</b>
<strong>python3</strong>
<br>


<!--img:图片标签
scr:图片路径
alt:图片描述
height:定义图片的高度
width:设置图片的宽度-->
<img src="./图片.jpg" width="500px" height="300px" alt="测试">
<br>

<!--audio:音乐和视频标签
controls:播放器-->
<!--audio:链接音乐-->
<audio src="" controls="controls"></audio>
<br>


<!--video:链接视频-->
<video src="./adnroid多个字段null崩溃.mp4" height="300px" width="500px" controls="controls"></video>
<br>


<!--a:超链接-->
<a href="https://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>

</body>
</html>

table2:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ol:有序列表,会自动在每一列前加上序号-->
<ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ol>


<!--ul:无序列表-->
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ul>


<!--table:表格。th:表头,td:格子,表格样式:border-->
<table border="2">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性格</th>
</tr>
<tr>
<td>小红</td>
<td>18</td>
<td>活泼</td>
</tr>
<tr>
<td>小子</td>
<td>19</td>
<td>闷骚</td>
</tr>
</table>
</body>
</html>

table3:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html表单</title>
</head>
<body>
<!--from:表单标签-->
<from action="" methon="post">
账号<input type="text" name="user">
<br>
密码<input type="password" name="pwd">
<br>
<input type="submit">
</from>>


<h1>注册</h1>
<form action="">
<!-- input:输入框,value:定义表单元素的值、name:定义表单元素的名称,此名称是提交数据时的键名,id:是唯一的标识;placeholder:输入框提示信息-->
<!-- label:绑定某个输入框,在点击该输入框文字时激活表单(表现是:点击标签名光标激活了)for:放需要绑定的标签的id-->
<label for="user">账号:</label>
<input type="text" id="user" name="user" placeholder="请输入账号">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="pwd" placeholder="请输入密码">
<br>
确认密码:<input type="password" name="pwd2" placeholder="请输入确认密码">
选择性别:
<!-- 单选框-->
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
选择语言:
<!-- 多选框-->
<input type="checkbox" name="skill">python
<input type="checkbox" name="skill">java
<input type="checkbox" name="skill">c+
<br>
上传头像:
<!-- 上传文件-->
<input type="file">
<br>
<!-- 按钮-->
<!-- submit:提交-->
<input type="submit">
<!-- button:普通按钮,点击没反应。一般触发css操作-->
<input type="button" value="普通按钮">
<br>
<!-- reset:重置按钮-->
<input type="reset" value="重置按钮">
<br>
<!-- image:图片按钮,以图片作为提交按钮-->
<input type="image" src="./图片.jpg">
<br>
<!-- hidden:隐藏表单域,把隐藏的name值在点击提交时进行默认提交-->
<input type="hidden" name="token" value="JAJAKSKKS$KAKA@">
<br>


个人介绍:
<!-- textarea: 文本输入框,一行30个字符,总共可以输入10行-->
<textarea name="desc" id="" cols="30" rows="10"></textarea>
<br>

<!-- select:选择框-->
省份:
<select name="" id="1">
<option value="">河南省</option>
<option value="">广东省</option>
<option value="">山东省</option>
</select>
城市:
<select name="" id="2">
<option value="">郑州</option>
<option value="">深圳</option>
<option value="">青岛</option>
</select>

</form>
iframe:内联框架,会创建包含另一个文档的内联框架(既行内框架)
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
<iframe src="http://www.taobao.com" frameborder="0"></iframe>
</body>
</html>

CSS

JavaScript

jquery

爱折腾的小测试
原文地址:https://www.cnblogs.com/newsss/p/14471488.html