HTML学习---基础知识学习
1.1. HTML
1、为什么要有HTML？
"Hello"
"<h1>Hello</h1>"
- 浏览器渲染时使用一套HTML规则，
- 学习规则
2、服务器端写HTML时，
在任何语言的WEB框架中：html就做模版
- .html
- .tpl template
- .chmtl
3、发送请求和相应请求时
请求：请求头 + 请求内容
响应：
4、HTML规则
- html/head/body/title/meta
- div/p/a/h/span/b/br/hr/em/ul/ol/li/img/table
- input/form/textarea/select
- style/script/link
HTML, htyper text markup language 即超文本标记语言
超 文 本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
标签的构成和其属性
标签分类：闭合标签和非闭合标签
闭合标签 ：<h1></h2>
自闭和标签：<hr/>
标签属性：
通常是以键值对的形式出现<h1 style='color:red'>China</h1>
只能出现在开始标签和自闭和标签
属性值只能小写，且带着引号
属性名和属性值一致的时候，直接写属性名即可，例如,readonly
标签分类：所有的标签统分为：
块级标签：<p><h1><table><ol><ul><form><div>
总是在新行上开始，每次占用一整行的内容；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
内联标签：<a><input><img><sub><sup><textarea><span>
和其他元素都在一行上；根据文本的大小占用大小
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
特殊字符："； < >；"；©®
实例包含：HTML基本组成，基本标签[快标签，内联标签的使用]，图形标签，超链接标签，列表标签
<!-- 这里是告诉浏览器， 引用W3的最新标准.历史上有2种浏览器渲染方式 -->
<!DOCTYPE html>
<html>
<head>
<!--设定字符编码-->
<meta charset="UTF-8">
<!--设定名称-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容-->
<!-- 设定2秒后自动跳转百度-->
<meta http-equiv="Refresh" content="20000;URL=https://www.baidu.com">
<!-- meta http-equiv="Refresh" content="2"-->
<!-- 这里是作浏览器的兼容性处理-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--网站内容的描述信息，便于搜索引擎查找信息-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<!--网站的关键词，便于搜索引擎抓取关键字-->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,DV,相机,数码,配件,手表,存储卡,京东" />
<!--非Mate标签,包括script和link-->
<!--这里是引用网站的logo-->
<link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-icon" />
<!--暂时不会-->
<link rel="search" title="京东JD.com" href="//misc.360buyimg.com/mtd/pc/common/conf/search.xml" type="application/opensearchdescription+xml" />
<script>
alert(window.top.document.compatMode) <!--显示浏览器渲染效果-->
</script>
<style>
#h0 {
color: orangered;
height: 300px;
width: 800px;
font-family: Arial;
background: lightpink;
}
#h1{
color: blue;
height: 300px;
width: 800px;
font-family: Arial;
background: palegreen;
}
#h2 {
color: rebeccapurple;
height: 300px;
width: 800px;
font-family: Arial;
background: greenyellow;
}
</style>
</head>
<body>
<h1>这个是好标签，共计6个，h1~h6</h1>
<p>这里是P标签，有换行和加空白行的作用</p>
<br/> <!--添加换行-->
<hr/> <!--添加一个横线-->
<p><del>文字添加中线【推荐使用】</del></p>
<p><strike>文字添加中线【不推荐使用】</strike></p>
<p><b>这里个加粗标签</b></p>
<p><em>斜字体</em></p>
<p><I>斜字体2</I></p>
<p>上角标2<sup>3</sup>=8</p>
<p>特殊字符-空格: 大于符号 < 小于符号：> 版权符号: © 著作人：® </p>
<p>下角标H<sub>2</sub>0</p>
<!--div主要是用来引用CSS文件的，本身除了换行外[块级标签]不具有任何的格式-->
<div style="color: rebeccapurple">hello div</div>
<!--span是一个内联标签，写多少 用多少，内联标签是跟着文本走的，默认不具有换行操作-->
<span style="color:royalblue">hello span</span><br>
<!--图片标签，注意属性应用-->
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=825738955,2683699723&fm=27&gp=0.jpg"
height="200px" width="400px" alt="黄沙百战穿金甲,不破楼兰终不还" title="愿你心无所畏，勇往直前"><br>
<!-- a标签有2个作用： 超链接 + 锚[通过#id实现]
这里用作超链接使用, __blank表示单独开一个页签-->
<a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道">百度</a> <hr>
<!--这里用作锚使用，注意元素都是用#来标示的-->
<a href="#h0" target="_self">神话</a>
<a href="#h1" target="_self">我是谁</a>
<a href="#h2" target="_self">警察故事</a>
<div id="h0"><a href="http://www.1905.com/vod/play/85426.shtml?__hz=55a7cf9c71f1c9c4&ref=baidu1905com" target="_blank">神话</a>
<p>无序列表的学习</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>句子</li>
</ul>
</div>
<div id="h1"><a href="http://www.iqiyi.com/v_19rrkgxf34.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" target="_blank">我是谁</a>
<p>有序列表的学习</p>
<ol>
<li>一年级</li>
<li>二年级</li>
<li>三年级</li>
</ol>
</div>
<div id="h2"><a href="http://www.le.com/ptv/vplay/1561263.html" target="_blank">警察故事</a>
<p>自定义列表的学习</p>
<dl>
<dt>第一章</dt>
<dd>神话</dd>
<dt>第二章</dt>
<dd>我是谁</dd>
<dt>第三章</dt>
<dd>警察故事</dd>
</dl>
</div>
<!--table表格的使用
table属性： cellpadding: 内边距 cellspacing: 外边距.
<tr>: table row
<th>: table head cell，有属性[rowspan: 单元格竖跨多少行, colspan: 单元格横跨多少列（即合并单元格）]
<td>: table data cell
-->
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<th colspan="3">水果</th>
<th>学生</th>
</tr>
<tr>
<td>苹果</td>
<td>小学生</td>
</tr>
<tr>
<td>香蕉</td>
<td>初中生</td>
</tr>
</body>
表单的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黄沙百战穿金甲，不破楼兰终不还</title>
</head>
<body>
<!--表单操作-->
<!--form标签里面的method方法主要我们用post和get的2种方法-->
<!-- get: 1.提交的内容以键值对拼接的字符串的形式放在地址栏中url后面.以&拼接
2.安全性相对较差[内容在浏览器框中出现].
3.对提交内容的长度有限制.4. 浏览器默认是get
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
-->
<form name="do_send" method="post" action="要提交的URL地址">
<!--这里添加了name属性，name是给服务器看的,id的唯一标识是给客户端看的-->
<!--有了name属性之后，发送的内容就是键值对的形式了：username='hhh'-->
<!--label点击文字，也可以进入对应的input框,利用id来进行关联-->
<label for="username" >姓名</label> <input id="username" type="text" name="username" ><br>
性 别
<!--这里使用了value来接收radio选中的内容,使用checked来选择默认的值-->
男<input type="radio" name="sex" id="male" value="male" checked>
女<input type="radio"name="sex" id="female" value="female"><br>
<label for="acc" >账号</label> <input id='acc' type="text" name="account" ><br>
<label for="pass" >密码</label> <input id="pass" type="password" name="password"><br>
爱 好
<!--这里使用了value来接收复选框选中的内容-->
<input type="checkbox" name="hobby" id="basket" value="basket" checked>篮球
<input type="checkbox" name="hobby" id="soccer" value="soccer">足球
<input type="checkbox" name="hobby" id="binghu" value="binghu">冰壶<br>
<!-- readonly: 只读. text 和 password-->
输入框 <input type="text" readonly><br>
居住地
<!--这里将name属性给了select标签，option里面的value保存真实值 multiple属性可以实现多选择的效
size表示页面最多显示2个,滚动条实现其他的选择。 optgroup用来实现分组
-->
<select name="province" multiple="multiple" size="5">
<optgroup label="山西省">
<option value="大同" selected>大同</option>
<option value="廊坊">廊坊</option>
<option value="朝阳">朝阳</option>
</optgroup>
<option value="BeiJing">北京市</option>
<option value="Hainan">海南省</option>
<option value="HaiBei">河北省</option>
</select><br>
<fieldset>
<legend>备注</legend>
<!--多行栏-->
<!--备注： <br>-->
<textarea title="备注" cols="80" rows="3">简介</textarea><br>
</fieldset>
<!-- 文件操作，第一：必须使用post的方式提交；第二使用enctype的multpart实现多段传送；enctype 表示form文件分成多个进行传递[防止占一次上传文件占用内存太大]，必备参数,文件以键值对的形式上传到后台，后台保存到一个特定对象中，我们通过对对象 进行操作实现文件的再写入，达到上传的目的 -->
请选择 <input type="file" formenctype="multipart/form-data"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
总结一下：
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值input标签中默认：value=on;
HTTP协议
【更多参考】http://www.cnblogs.com/yuanchenqi/articles/6000358.html
HTML学习---基础知识学习的更多相关文章
- android开发学习---基础知识学习、如何导入已有项目和开发一个电话拨号器
一.基础知识点学习 1.Android体系结构 如图所示,android 架构分为三层: (1)最底层是linux内核,主要是各种硬件的驱动,如相机驱动(Camera Driver),闪存驱动(Fl ...
- Java学习---基础知识学习
2016-07-23 周六 利用键盘输入的时候需要抛出异常 ,直接快捷键 ctrl + 1 ;定义数组 int score[] = new int[4] ; 只有4个数字BufferedRead ...
- 韩天峰博客 php基础知识学习记录
http://rango.swoole.com 写好PHP代码真的不容易,给大家几个建议: 慎用全局变量,全局变量不好管理的,会导致你的代码依赖于全局变量,而耦合度太高. 一定不要复制粘贴代码,可重用 ...
- GCC基础知识学习
GCC基础知识学习 一.GCC编译选项解析 常用编译选项 命令格式:gcc [选项] [文件名] -E:仅执行编译预处理: -S:将C代码转换为汇编代码: -c:仅执行编译操作,不进行连接操作: -o ...
- (转)Linux基础知识学习
Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...
- Objective-c基础知识学习笔记
Objective-c基础知识学习笔记(一) 一直有记录笔记的习惯.但非常久没分享一些东西了,正好上半年開始学习IOS了,如今有空写点.因开发须要,公司特意为我们配置了几台新MAC.还让我们自学了2周 ...
- Matrix学习——基础知识
以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...
- AXAJ基础知识学习
AXAJ基础知识学习 博客首页 Ajax简介 ajxa全称是Asynchronous Javascript And XML ,就是异步的JS 和XML 通过Ajax可以再浏览器中向服务器发送异步请求, ...
- Vue2基础知识学习
Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...
随机推荐
- Linux下SSH工具 PAC Manager的安装
PAC Manager, Linux下类似SecureCRT Xshell的SSH工具,该工具功能上相当的不错,完全可以代替SecureCRT Xshell的功能. PAC (Perl Auto Co ...
- PTA (Advanced Level) 1066 Root of AVL Tree
Root of AVL Tree An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of ...
- yii2 页面加载警告框
在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...
- Java - 接口还是抽象类
Java有两种机制可以为某个抽象提供多种实现——Interface和abstract class. Interface 和 abstract class, 除了比较明显的区别(也就是能否提供基本实现) ...
- C++/CLI 本地字符串和托管字符串之间的转换
参考: https://docs.microsoft.com/zh-cn/cpp/dotnet/overview-of-marshaling-in-cpp #include "msclr/m ...
- C# OO（初级思想）。
继承,多态,封装 在C#中,为了能够合理描述自然界的规律,面向对象的编程引入了继承的概念,是面向对象编程中最重要的概念之一,定义了如何根据现有的类创建新类的过程. 继承:一个类派生出来的子类具有这个类 ...
- Java学习--jsp基础语法
<%! %>和<% %>的区别: <%! //1.可定义方法 //2.可定义static方法 //3.可定义static属性 //4.不可以使用out对象 %> ...
- Apache shiro的简单介绍与使用(与spring整合使用，并加入ehcache缓存权限数据）
apache shiro框架简介 Apache Shiro是一个强大而灵活的开源安全框架,它能够干净利落地处理身份认证,授权,企业会话管理和加密.现在,使用Apache Shiro的人越来越多,因为它 ...
- java io简单使用
public class CreateFile { public static void main(String[] args) { /* * 文件夹的创建和文件的生成 */ File f1 = ne ...
- android中利用HttpURLConnection进行Get、Post和Session读取页面。
直接上代码,调用的时候要放在线程中. package slj.getsms; import java.io.BufferedReader; import java.io.InputStreamRead ...