1. HTML概念：

HTML是最基础的网页开发语言

* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言

注意：在浏览器界面上按f12,会弹出开发者工具

2. 快速入门：
语法：
(1)html文档后缀名 .html 或者 .htm
(2)标签分为
<1>围堵标签：有开始标签和结束标签。如 <html> </html>
<2>自闭和标签：开始标签和结束标签在一起。如 <br/>

(3)标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>

(4)在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
(5) html的标签不区分大小写，但是建议使用小写。

3. 标签学习：

(1)文件标签：构成html最基本的标签

* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档

(2)文本标签：和文本有关的标签

注释：<!-- 注释内容 -->
<h1> to <h6>：标题标签
 h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式  * center：居中  * left：左对齐  * right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
* 属性：* color：颜色  * size：大小  * face：字体

* 属性定义：
* color：
<1> 英文单词：red,green,blue
<2>rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
<3> #值1值2值3(掌握)：值的范围：00~FF之间。如： #FF00FF
* width：
<1> 数值：width='20' ,数值的单位，默认是 px(像素)
<2> 数值%：占比相对于父元素的比例

html特殊字符表：

(3) 图片标签：

* img：展示图片
* 属性：
* src：指定图片的位置

src采用相对路径
以.开头的路径
 ./：代表当前目录 ./image/1.jpg
../:代表上一级目录

(4)列表标签：

<1>有序列表：
* ol:
* li:
<2>无序列表：
* ul:
* li:

(5) 链接标签：
* a:定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开

(6)块标签

div和span：

* div:每一个div占满一整行。块级标签
* span：文本信息在一行展示，行内标签 内联标签(不会换行)

(7)语义化标签：html5中为了提高程序的可读性，提供了一些标签。
<header>：页眉
<footer>：页脚

(8)表格标签：
* table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* bgcolor：背景色
* align：对齐方式
* td：定义单元格
* colspan：合并列
* rowspan：合并行
* th：定义表头单元格
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分

(9)表单标签
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form标签：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
action：指定提交数据的URL
* method:指定提交方式
分类：一共7种，2种比较常用
* get：
<1>请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
<2>请求参数大小是有限制的。
<3> 不太安全。
* post：
<1>请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
<2> 请求参数的大小没有限制。
<3>较为安全。

* 表单项中的数据要想被提交：必须指定其name属性

* 表单项标签：
(1)input(输入框)：可以通过type属性值，改变元素展示的样式
type属性：
　　* text：文本输入框，默认值
　　* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
　　* password：密码输入框
　　* radio:单选框
　　　　注意：
　　　　<1>要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
　　　　<2>一般会给每一个单选框提供value属性，指定其被选中后提交的值
　　　　<3> checked属性，可以指定默认值

　　*checkbox：复选框
　　　　注意：
　　　　<1>一般会给每一个单选框提供value属性，指定其被选中后提交的值
　　　　<2>checked属性，可以指定默认值

　　* file：文件选择框
　　* hidden：隐藏域，用于提交一些信息。
　　* 按钮：
　　　　<1>submit：提交按钮。可以提交表单
　　　　<2>button：普通按钮
　　　　<3>image：图片提交按钮
　　　　　　src属性指定图片的路径

　　* label：指定输入项的文字描述信息
　　　　* 注意：
　　　　* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
(2)select: 下拉列表
* 子元素：option，指定列表项

(3)textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。

02 HTML的更多相关文章

  1. Kotlin中变量不同于Java： var 对val（KAD 02）

    原文标题:Variables in Kotlin, differences with Java. var vs val (KAD 02) 作者:Antonio Leiva 时间:Nov 28, 201 ...

  2. Android游戏开发实践(1)之NDK与JNI开发02

    Android游戏开发实践(1)之NDK与JNI开发02 承接上篇Android游戏开发实践(1)之NDK与JNI开发01分享完JNI的基础和简要开发流程之后,再来分享下在Android环境下的JNI ...

  3. iOS系列 基础篇 02 StoryBoard 故事板文件

    iOS基础 02 StoryBoard 故事板文件 目录: 1. 故事板的导航特点 2. 故事板中的Scene和Segue 3. 本文最后 在上篇HelloWorld工程中有一个Main.storyb ...

  4. [转]Tesseract 3.02中文字库训练

    下载chi_sim.traindata字库下载tesseract-ocr-setup-3.02.02.exe 下载地址:http://code.google.com/p/tesseract-ocr/d ...

  5. Java多线程系列--“JUC锁”02之 互斥锁ReentrantLock

    本章对ReentrantLock包进行基本介绍,这一章主要对ReentrantLock进行概括性的介绍,内容包括:ReentrantLock介绍ReentrantLock函数列表ReentrantLo ...

  6. Oracle Recovery 02 - 常规恢复之不完全恢复

    背景:这里提到的常规恢复指的是数据库有完备可用的RMAN物理备份. 实验环境:RHEL6.4 + Oracle 11.2.0.4 单实例. 二.常规恢复之不完全恢复:部分数据丢失 2.1 重做日志文件 ...

  7. 异步编程系列第02章 你有什么理由使用Async异步编程

    p { display: block; margin: 3px 0 0 0; } --> 写在前面 在学异步,有位园友推荐了<async in C#5.0>,没找到中文版,恰巧也想提 ...

  8. star ccm+ 11.02安装

    STAR CCM+是CD-Adapco公司的主打软件,其安装方式较为简单,这里以图文方式详细描述STAR CCM+11.02安装过程. 1 安装准备工作2 正式安装3 软件破解4 软件测试 1 安装准 ...

  9. 导入项目时，有关[2016-04-03 20:38:02 - Dex Loader] Unable to execute dex: Multiple dex files 问题

    最近我在学习androidUI设计,在网上找了一个UI菜单界面开源代码示例,按照步骤导入项目,运行的时候控制台结果报了如下错误: [2016-04-03 20:38:02 - Dex Loader] ...

  10. java多线程系类：JUC线程池：02之线程池原理（一）

    在上一章"Java多线程系列--"JUC线程池"01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我 ...

随机推荐

  1. Pytest权威教程16-经典xUnit风格的setup/teardown

    目录 经典xUnit风格的setup/teardown 模块级别setup/teardown 类级别setup/teardown 方法和函数级别setup/teardown 返回: Pytest权威教 ...

  2. kubernetes 1.14安装部署ingress

    简单介绍: Ingress是Kubernetes API的标准资源类型之一,它其实就是一组基于DNS名称或URL路径把请求转发至指定的Service资源的规则,用来将集群外部的请求流量转发至集群内部. ...

  3. svn部署-linux

    Svn作用 Subversion是一个自由/开源的版本控制系统,一组文件存放在中心版本库,记录每一次文件和目录的修改,Subversion允许把数据恢复到早期版本,或是检查数据修改的历史,Subver ...

  4. 常用spaceclaim脚本（三）

    拉伸曲线 ptList=List[Point]() #定义一个点的列表 ptList.Add(Point.Create(MM(11),MM(-14),MM(0))) #创建点,并放入列表当中 ptLi ...

  5. SQL中查询现有未释放连接

    SELECT dbid,count() FROM [Master].[dbo].[SYSPROCESSES] WHERE spid> and status='sleeping' group by ...

  6. intellij idea tomcat 启动不生成war包

    intellij idea tomcat 启动不生成war包 想把项目打包成war包做测试,但是按照之前的方法居然没有成功导出war包,犯了很低级的错误,特此记录. (1)首先在Project Str ...

  7. At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger fo

    一.文章前言 本文是亲测有效解决At least one JAR was scanned for TLDs yet contained no TLDs问题,绝对不是为了积分随便粘贴复制然后压根都没有用 ...

  8. JVM 初始化阶段例子

    创建如下Demo package com.example.jvm.classloader; class Parent{ static int a = 3; static { System.out.pr ...

  9. 设定rsync开机自启动

    1.启用rsync服务systemctl enable rsync 2.打开rsync自己的开关,这个找了好多地方才找到的vi /etc/default/rsyncRSYNC_ENABLE=true

  10. Perf -- Linux下的系统性能调优工具，第 1 部分 应用程序调优的使用和示例 Tracepoint 是散落在内核源代码中的一些 hook，一旦使能，它们便可以在特定的代码被运行到时被触发，这一特性可以被各种 trace/debug 工具所使用。Perf 就是该特性的用户之一。

    Perf -- Linux下的系统性能调优工具,第 1 部分 应用程序调优的使用和示例 https://www.ibm.com/developerworks/cn/linux/l-cn-perf1/i ...