上一篇给大家介绍了学习HTML的准备工作，本文开始带大家步入HTML的学习

一、HTML基础

　　网页的组成：

　　　　HTML：页面构成

　　　　css：页面样式表现

　　　　JavaScript：交互行为

　　HTML简介：

　　　　Hyper Text Markup Language译为“超文本标记语言”，主要通过HTML标签对网页的文本、图片、声音等内容进行描述

　　HTML语法：

　　html框架：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

html标签以"<"开头，如果标签后面有属性，加空格然后还是 属性名=“”，如果有多个属性，属性间使用空格隔开，以“>”结束，如果是闭合标签需要在结束标签前加“/”

HTML头部标签：

　　doctype：<!DOCTYPE>声明帮助浏览器正确地显示网页。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

　　head：<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及

<style>。

　　title：<title> 标签定义文档的标题。元素在所有 HTML/XHTML 文档中都是必需的。元素能够：定义浏览器工具栏中的标题、提供页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题

　　link：<link> 标签定义文档与外部资源之间的关系。常用于连接样式表：

　　meta：meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时 间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

　　script：<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

　　style：<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

　　URL协议：Uniform Resource Loacator，统一资源定位符是对可以从互联网上得到资源的位置和访问方法的一种简介的表示，是互联网上标准资源的地址，互联网上的每一个资源都有一个唯一的URL，它包含的信息之处文本的位置以及浏览器怎么处理它

　　协议规定格式：scheme://host.domain:port/path/filename

　　scheme：定义因特网服务的类型，常见的类型是http

　　host：定义域主机（http的默认主机是www）

　　domain：定义因特网域名

　　port：定义主机上的端口号（http默认80端口）

　　path：定义服务器上的路径

　　filename：定义文档/资源名称

　　常见的协议：http、https、ftp、迅雷协议

二、 HTML标签

　　标题：h1-h6;h1最大，h6最小。<h1>标题</h1>文字为标题就是要h标签（水平线 <hr/>）

　　段落：<p></p>标签，一对标签一个段落，自动换行，但是行与行之间有一定的间距。 <br/>手动换行，行与行之间在一起，中间无太大间距

　　格式化：

　　　　一、文本格式化：在一个HTML文件中对文本进行格式化

　　　　 二、预格式文本：是要pre对空行和空格进行控制（代码一模一样的输出）

　　　　 三、“计算机输出”标签：显示计算器编程代码

　　　　四、地址：在HTML中写地址

　　　　五、缩写和首字母缩写：<abbr title="wangxiang">wx</abbr>（缩写）<acronym title="wang xiang">wx</acronym>(首字母缩写)在浏览器中显示wx，当鼠标移到wx处时会显 示title中的内容

　　　　 六、文字方向：改变文字的方向 <dbo></bdo>一对标签 dir属性 有rtl和ltr两个值，rtl反向输出<bdo dir="rtl">hello ! nice to meet you</bdo>反方向输出

　　　　七、块引用：实现长短不一的引用语<blockquote>长引用</blochquote>（自动换行，缩进）<q>短引用</q>（自动引号括起来）

　　　　八、删除字效果和添加字效果：标记删除文本和插入文本<del>文本中间划线</del>，<ins>文本的底部划线</ins>

　　HTML中的样式：外部样式表，内部样式表，内联样式表。去掉连接的下划线:style="text-decoration:none"

　　连接：

　　　　一、超链接：<a href="http://www.baidu.com" target="_self(_blank)">连接名</a> target打开方式，_self当前网页，_blank新开网页

　　　　二、页面内的跳转：<a name="顶端" href="#底端">回到顶端</a>,<a name="底端" href="#底端">回到顶端</a>

　　　　三、发送邮件：<a href="mailto":792461583@qq.com>发送邮件</a>

　　图像:<p><img src="xxxx" align="right">xxxxx</p>浮动在文本的右边

三、表格（table）
<table>

　　<tr>

　　　　<td>xx</td>

　　<tr>

<table>

　　table></table>:定义表格。
　　<tr></tr>:行。
　　<td></td>：列。
　属性介绍:
　　border:定义边框的粗细。
　　cellspacing:单元格与单元格之间的距离。
　　Cellpadding:单元格边框与内容的距离。
　　Width：宽度。
　　Height:高度。
　　Bgcolor:背景颜色。
　　align：left center right 给tr和td使用时，可以设置单元格内容的水平对齐方式。如果给table使用，设置表格对齐方式。
　　<th></th>表格的标题标签，用法和td一样，会自动加粗th中文字，居中对齐。
　　表头，<caption></caption>,设置表的名字。

表格的合并

　　Colspan:横向合并 Colspan=“2”横向的二合一

　　Rowspan:纵向合并 Rowspan=“3” 纵向的三合一了

表格的标准结构

<table>

    <thead></thead>  表格头部文件

    <tbody></tbody>  表格主体

    <tfoot></tfoot>    表格尾部

   </table>

四、列表：

　1、无序列表：<ul type="circle">//type设置列表前面的小符号，circle小圆圈，disk小黑点，square矩形小方框

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

　2、有序列表：

<ol>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ol>

　3、自定义列表：

<dl>

    <dt>1</dt>//小标题

    <dt>2</dt>

    <dt>3</dt>

    <dt>4</dt>

    <dt>5</dt>

</dl>

　　块：自开始自结束

　　布局：div和table

五、表单

表单的组成：提示信息、表单的控件、表单域

表单控件介绍

　　1、表单标签

<form action="1.php" method=“”></form>

Action:收集信息，将信息提交给谁。

Method:提交数据的方法，get | post

get:通过浏览器的地址栏传输数据，安全性低。

post:通过提交数据的文件处理数据，安全性高。

　　2二、文本输入框

 <input type="text"name="ped" maxlenght="6">

maxlength:设置文本框输入内容的长度。

readonly:将文本框设置为只读状态，只能读，不能写。

Disabled:将文本框设置为未激活状态。

Name:输入框的名字。

Value:输入框的值。

　　3、密码输入框

<input type="password" name="pwd"maxlenght="6"/>

　　4、单选框

  <input type ="radio"name="gender"checked="checked">男

  <input type="radio"name="gender"checked="checked">女

当将需要单选的单选框name属性值设置为一样的时候，才能实现单选效果。

Checked=”checked”,设置单选按钮的默认选项。

　　5、下拉列表

 <select>

               <option muitiple=muitiple>河南省 </option>

               <option>北京省</option>

               <option>河北省 </option>

               <option>南京省 </option>

 </select>

Multiple=”multiple”,设置下拉列表为多选项。

　　6、多选框

Checked=”checked”，可以设置多选框默认选项。

  <input type="checkbox" checked="checked">

　　7、多行输入文本域

 <textarea name="#" cols="30" rows="10"></textarea>

　　8、上传文件控件

<input type="flie" />

　　9、按钮

<!-- 提交按钮 -->

            <input type="submit">

<!-- 普通按钮 -->

            <input type="button" value="普通按钮">

<!-- 重置按钮 -->

            <input type="reset" value="重置信息">

<!-- 图片按钮 -->

<input type="image" src="meinv.png" />

<!--分组 -->

<fieldset>

<legend>用户注册信息<lengend>

</fieldset>

　　10.html5表单新特征

<!-- 判断网址 -->

    <input type="url">

<!-- 判断邮箱 -->

    <input type="email">

<!-- 日期控件 -->

    <input type="date">

<!-- 时间控件 -->

    <input type="time">

<!-- 数字控件 -->

    <input type="number" step="5">

<!-- 滑块控件 -->

    <input type="range" max="100" min="2" step="50">

六、框架：

　　内联框架

<iframe src="xxx.htm" width="200" height="200" frameborder="0"></frame>

七、meta标签

　　meta对网页的描述

　　一、<meta name="description" content="这是一个很好的网站"/>//定义对网站的描述

　　二、<meta name="keywords" content="很好, 网站"/>//定义搜索关键字，用在搜索引擎搜索时

　　script标签：引入JS

　　不常用语义标签

　　　　<code>定义计算机代码

　　　　<var>定义变量

　　　　<pre>定义预格式文本

　　　　<abbr>定义缩写

　　　　<address>定义地址

　　　　<blockquote>定义长的引用

　　　　<cite>定义引用、引证

　　　　<dfn>定义一个定义项目

　　特殊字符标记

　　　行内元素

　　　　行内标签不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。常用于控制页面中文本的样式

　　　　常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>

　　　块元素

　　　　每个块元素通常都会独自占据一整行或者多整行，可以对其设置宽度、高度、对齐等属性。常用于网页布局和网页结构搭建

　　　　常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

HTML基础入门学习的更多相关文章

  1. 函数:我的地盘听我的 - 零基础入门学习Python019

    函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...

  2. VBox&vmware虚拟机安装Linux及Linux基础入门学习

    VBox&vmware虚拟机安装Linux及Linux基础入门学习 通过VMware workstation安装Linux 在安装虚拟机之前,我特意上网搜索了一下目前常使用的虚拟机软件,了解了 ...

  3. 【Python教程】《零基础入门学习Python》（小甲鱼）

    [Python教程]<零基础入门学习Python>(小甲鱼) 讲解通俗易懂,诙谐. 哈哈哈. https://www.bilibili.com/video/av27789609

  4. Mybatis基础入门学习

    Mybatis基础入门学习 mybatis架构分析 搭建测试mybatis架构 )下载并导入mybatis3.2.7.jar(架构),mysql-connector-java-5.1.7-bin.ja ...

  5. 《零基础入门学习Python》【第一版】视频课后答案第001讲

    测试题答案: 0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方 ...

  6. 零基础入门学习Python（1）--我和Python的第一次亲密接触

    前言 最近在学习Python编程语言,于是乎就在网上找资源.其中小甲鱼<零基础入门学习Python>试听了几节课,感觉还挺不错,里面的视频都是免费下载,小甲鱼讲话也挺幽默风趣的,所以呢,就 ...

  7. 学习参考《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    国内编写的关于python入门的书,初学者可以看看. 参考: <零基础入门学习Python>电子书PDF+笔记+课后题及答案 Python3入门必备; 小甲鱼手把手教授Python; 包含 ...

  8. 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...

  9. 大牛整理最全Python零基础入门学习资料

    大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』     帖子类别:『人工智能』  阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...

  10. 小甲鱼零基础入门学习python--课后作业

    [小甲鱼零基础入门学习python--课后作业] 小甲鱼零基础入门学习python--课后作业 本章内容: 1.基础部分的作业 2.函数部分的作业 3.字典.集合.文件部分作业 4.异常 5.Easy ...

随机推荐

  1. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_6_Map集合遍历键值对方式

    增强for

  2. Windows Server 2008 R2 为用户“IIS APPPOOL\DefaultAppPool”授予的权限不足，无法执行此操作

    报表开发与部署好后,也嵌入到aspx页面中了,使用VS自带的Web服务器组件,一切正常,当部署到IIS中的时,出现了如下错误: 为用户“IIS APPPOOL\DefaultAppPool”授予的权限 ...

  3. php-fpm启动不起来，php-fpm无法启动的一种情况

    今天碰了一个很奇怪的问题,平时好好的php-fpm修改了一个参数后,突然启动不起来了,试着把参数还原.甚至用备份的配置文件还原都没办法启动php,而且不给任务启动错误的提示,纳闷!!!后来上网找了个资 ...

  4. Arduino的小灯亮起来~~~

    呵呵呵~~~昨天宝宝,就守着板子,跟说明书,心里默念,怎么特么还不亮?这个 东西怎么还不出!?~ 我特么没插线,可不不出么... 然后找那跟儿蓝色(我这个是蓝色的,不知道 有没有别的颜色的)的带USB ...

  5. Mac016--安装kubernetes(k8s)

    一.安装kubernetes(k8s) 参考: http://batizhao.github.io/2018/01/18/Running-Kubernetes-Locally-via-Minikube ...

  6. 20191023 XXL-JOB

    概述 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. 文档地址: 官方文档 文档写的很详细,参考着 ...

  7. C#里sqlDataAdapter.fill(DataSet，String)的用法

    第二个参数 String是指定DataSet 里表的名字,例如 sqlDataAdapter.fill(DataSet,"学生表") 指定后,以后就可以这样调用这张表 DataSe ...

  8. C#异步：AsyncCallback和IAsyncResult

    在线程池异步的执行委托,异步编程模型 msdn官方解释:https://msdn.microsoft.com/zh-cn/library/ms228972(VS.80).aspx 使用AsyncCal ...

  9. 对第一个HelloWorld程序的总结：

    /* 注释的作用 :提高了代码的阅读性:调试程序的重要方法 对第一个程序的总结: 创建:创建一个以.java结尾的文件叫做源文件 编译:(javac 源文件名.java) 会生成一个或多个字节码(.c ...

  10. CSS制作垂直口风琴2

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...