前端基础之初识 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 ...
随机推荐
- 网络协议UDP
------------------------------互联网协议与协议族------------------------------tcp/ip协议介绍:计算机网络协议,不同类型不同厂家之间的终 ...
- ScrollView嵌套ListView只显示一行
错误描述 ScrollView嵌套ListView中导致ListView高度计算不正确,只显示一行. 解决方法 重写ListView的onMeasure方法,代码如下. @Override publi ...
- 分布式定时任务 -- elastic-job
一.前言 在我们的项目当中,使用定时任务是避免不了的,我们在部署定时任务时,通常只部署一台机器.部署多台机器时,同一个任务会执行多次.比如短信提醒,每天定时的给用户下发短信,如果部署了多台,同一个用户 ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- Linux Centos 6.9中SSH默认端口修改的坑
关于Linux Centos6.5的SSH默认端口修改的博客有一大堆,我在这里就不啰嗦了,但是面对Centos 6.9,就会发现有一个巨坑: 修改iptables之后执行下面的命令后: # servi ...
- [转载]Linux shell中的竖线（|）——管道符号
原文地址:Linux shell中的竖线(|)--管道符号作者:潇潇 管道符号,是unix一个很强大的功能,符号为一条竖线:"|". 用法: command 1 | command ...
- php的mysql语句里变量加不加单引号问题
第一种[{$_GET['id']}加不加单引号都能正常执行没问题] $sql = "select * from `news` where `id` = {$_GET['id']}" ...
- 作业2——需求分析&原型设计
需求分析: 软件的最终目的是用来解决用户的某些问题,需求分析就是要理解要解决的问题,真正明确用户需求.下面是我们初步的需求分析: 1.访问软件项目的真实用户(至少10个),确保软件真正体现用户的需求, ...
- 201521123053《Java设计与程序》第六周学习总结
---恢复内容结束--- 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但 ...
- 【干货篇】步步为营，带你轻松掌握jQuery！
写在前面:经过系统的学习了原生JS之后,会发现其具有以下三个特点: 1.是一种解释性脚本语言(代码不进行预编译). 2.主要用来向 HTML 页面添加交互行为. 3.可以直接嵌入 HTML 页面,但写 ...