前端基础之初识 HTML
HTML
HTML（Hypertext Markup Language）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
下面我们来学习 HTML 基础知识！
head部分
自动刷新、标题、ico：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>python之路</title>
<link rel="python icon" href="favicon.ico">
<!--<meta http-equiv="Refresh" content="5">-->
<meta http-equiv="Refresh" content="5";url="http://www.baidu.com"/>
</head>
body部分
标签
------------------------------------------
<body>
<h1>H1标签</h1>
<h2>H2标签</h2>
<h3>H3标签</h3>
<h4>H4标签</h4>
<h5>H5标签</h5>
<h6>H6标签</h6>
------------------------------------------
<h2>块级标签</h2>
<h1 style="background-color: green;color: antiquewhite">h1标签</h1>
<h2>内联标签</h2>
<a style="background-color: blue;color: antiquewhite">a标签</a>
<h2>a标签,href,当前页打开</h2>
<a href="http://www.baidu.com">点我，跳转百度</a>
<h2>a标签，target 新页打开</h2>
<a href="http://www.baidu.com" target="_blank">点我，在新页跳转百度</a>
------------------------------------------
展示效果如下：
段落、换行、符号
<h2>段落/换行</h2>
<p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识一个进程协议＋端口号唯一标识网络中的一个进程。</p>
<p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识</br>一个进程协议＋端口号唯一标识网络中的一个进程。</p>
<h2>符号</h2>
© <!-- copy 符号-->
< a > <!-- 小于 大于号-->
<!-- 换行-->
锚
<h2>锚mao</h2>
<a href="#top1">第一章</a>
<a href="#top2">第二章</a>
<a href="#top3">第三章</a>
<a href="#top4">第四章</a>
<a href="#top5">第五章</a>
<div style="height: 400px;"></div>
<div id="top1" style="height: 100px;">第一章内容</div>
<div id="top2" style="height: 100px;">第二章内容</div>
<div id="top3" style="height: 100px;">第三章内容</div>
<div id="top4" style="height: 100px;">第四章内容</div>
<div id="top5" style="height: 100px;">第五章内容</div>
展示效果如下：
select 标签
<h2>select标签</h2>
<h3>select标签，group,value=“1”...,可以根据group 2提交到后台</h3>
<select name="group">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">株洲</option>
<option value="6"selected="selected">长沙</option>
</select>
<h3>select标签，只能单选</h3>
<select size="5">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>株洲</option>
<option selected="selected">长沙</option>
</select>
<h3>select标签，可以多选</h3>
<select multiple="multiple" size="4">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>长沙</option>
<option>株洲</option>
</select>
<h3>select标签，显示分组</h3>
<select multiple="multiple" size="6">
<optgroup label="湖南省">
<option>长沙</option>
<option>株洲</option>
</optgroup>
<optgroup label="湖北省">
<option>武汉</option>
<option>黄冈</option>
<option>咸宁</option>
</optgroup>
</select>
select展示效果如下：
input 系列:
<h2>input系列.复选框</h2>
<h2>checkbox--多选</h2>
<h4>checked="checked"默认选中</h4>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<h2>radio--单选</h2>
<h4>name="名称",name相同互斥</h4>
男
<input name="r1" type="radio" value="man" />
女
<input name="r2" type="radio" value="male"/>
<hr />
男
<input name="r3" type="radio" />
女
<input name="r3" type="radio" />
<h2>单行标准文本输入框text、password</h2>
<input type="text">
<input type="password">
<h2>上传文件</h2>
<input type="file">
<h2>按钮</h2>
<input type="button" value="按钮">
<input type="submit" >
<input type="submit" value="按钮">
展示效果如下：
<h2>多行文本框</h2>
<textarea>框中内容</textarea>
<h2>多行文本框与text区别</h2>
<input type="text">
<input type="text" value="allen">
<h2>label标签</h2>
<h4>没有应用label，点击姓名字体时没反应</h4>
姓名：<input id="name1" type="text">
婚否：<input id="marry1" type="checkbox">
<h4>有应用label，点击姓名有反应(for)</h4>
<label for="name2">姓名：
<input id="name2" type="text">
<label for="marry2">婚否：
<input id="marry2" type="checkbox">
展示效果如下：
ul、ol、dl 比较:
<h2>ul,自动在前面加点.</h2>
<ul>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
</ul>
------------------------------------------
<h2>ol,自动排序</h2>
<ol>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
</ol>
------------------------------------------
<h2>dl,列表</h2>
<dl>
<dt>湖南</dt>
<dd>长沙</dd>
<dt>河北</dt>
<dd>石家庄</dd>
</dl>
展示效果如下：
table 表格：
<h2>table 表格，无边框</h2>
<table>
<tr>
<td>主机名</td>
<td>IP</td>
<td>状态</td>
</tr>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</table>
------------------------------------------
<h2>table 表格，边框</h2>
<table border="1">
<tr>
<td>主机名</td>
<td>IP</td>
<td>状态</td>
</tr>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</table>
------------------------------------------
<h2>table 表格，边框，表头:将td换成th，同时还自动加粗了</h2>
<table border="1">
<tr>
<th>主机名</th>
<th>IP</th>
<th>状态</th>
</tr>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</table>
------------------------------------------
<h2>table 表格，为了代码看起来更易懂，则分别在表头加了thead 和 tbody，这种方法推荐使用</h2>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>IP</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</tbody>
</table>
------------------------------------------
<h2>table 表格，合并单元格,列合并，colspan="2",占用两列</h2>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th colspan="2">IP</th>
<!--<th>状态</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</tbody>
</table>
------------------------------------------
<h2>table 表格，合并单元格,列合并，colspan="4",占用四列</h2>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th colspan="4">IP</th>
<!--<th>状态</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td>baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</tbody>
</table>
------------------------------------------
<h2>table 表格，合并单元格,行合并，rowspan="3",占用3行</h2>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>IP</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>baidu1.com</td>
<td>1.1.1.1</td>
<td>在线</td>
</tr>
<tr>
<td rowspan="3">baidu2.com</td>
<td>1.1.1.2</td>
<td>down机</td>
</tr>
<tr>
<!--<td>baidu2.com</td>-->
<td>1.1.1.2</td>
<td>down机</td>
</tr>
<tr>
<!--<td>baidu2.com</td>-->
<td>1.1.1.2</td>
<td>down机</td>
</tr>
</tbody>
</table>
展示效果如下：
fieldset 边框:
<h2>fieldset 边框</h2>
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
------------------------------------------
<h2>form 表单,botton,reset提交按钮默认需要结合js等绑定事件，否则点击不生效，啥也不做，而submit可以直接提交</h2>
<form action="/account/login/">
用户名：<input type="text" name="username"/>
密码：<input type="password" name="pwd"/>
验证码：<input type="password" name="pwd">
<img src="/checkcode/">
<input type="button" value="botton" onclick="alert(1234);"/>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
<!--{'username':'allen','pwd':'1234'}-->
------------------------------------------
<h2>form 表单,根据关键字向sogou服务器发起请求，从而进行搜索</h2>
<form action="http://www.sogou.com/web">
关键字：<input type="text" name="query"/>
<input type="submit" value="submit"/>
</form>
<!--{'username':'allen','pwd':'1234'}-->
------------------------------------------
</body>
</html>
展示效果如下：
html 中文学习网址: http://www.w3school.com.cn/html/index.asp
前端基础之初识 HTML的更多相关文章
- 前端基础----html初识、常用标签
一.HTML初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) ...
- 2020年12月-第02阶段-前端基础-CSS初识
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...
- 前端基础之初识HTML
一.web服务的本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.b ...
- 前端第一篇---前端基础之HTML内容
前端基础之HTML内容 阅读目录(Content) 一.HTML初识 1.web服务本质 2.HTML是什么 3.HTML不是什么 二.HTML文档结构 三.HTML标签格式 四.HTML注释 五.H ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
随机推荐
- ElasticSearch和Kibana 5.X集群的安装
ElasticSearch和Kibana 5.X集群的安装 1.准备工作 1.1.下载安装包 1.2.系统的准备 2.ElasticSearch集群的安装 2.1.修改 config/elastics ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- Linux Centos 6.9中SSH默认端口修改的坑
关于Linux Centos6.5的SSH默认端口修改的博客有一大堆,我在这里就不啰嗦了,但是面对Centos 6.9,就会发现有一个巨坑: 修改iptables之后执行下面的命令后: # servi ...
- Mac环境下mysql初始化密码问题--If you lose this password, please consult the section How to Reset the Root Password in the MySQL reference manual.
个人在Mac上操作数据库,遇到的启动数据库问题的简单记录 1.苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) 2.进 ...
- RobotFramework自动化测试框架-移动手机自动化测试Input Text和Click Button关键字的使用
Input Text和Click Button Input Text 关键字一般用来给输入框进行输入操作,该关键字接收两个参数[ locator | text ]. 示例1:启动安卓手机上一个APP的 ...
- CentOS7 安装Nginx+MySQL
首先我们需要安装nginx的yum源 [root@AD ~]# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-releas ...
- 【Beta】 第七次Daily Scrum Meeting
第七次meeting会议 [Beta] 第七次Daily Scrum Meeting 一.本次会议为第七次meeting会议 二.时间:10:00AM-10:20AM 地点:禹州楼 三.会议站立式照片 ...
- 201521123017 《Java程序设计》第5周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1.2 ...
- 201521123066《Java程序设计》第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪 ...
- 201521123022 《Java程序设计》 第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...