HTML基础入门学习
上一篇给大家介绍了学习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标签
段落：<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> <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基础入门学习的更多相关文章
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- VBox&vmware虚拟机安装Linux及Linux基础入门学习
VBox&vmware虚拟机安装Linux及Linux基础入门学习 通过VMware workstation安装Linux 在安装虚拟机之前,我特意上网搜索了一下目前常使用的虚拟机软件,了解了 ...
- 【Python教程】《零基础入门学习Python》（小甲鱼）
[Python教程]<零基础入门学习Python>(小甲鱼) 讲解通俗易懂,诙谐. 哈哈哈. https://www.bilibili.com/video/av27789609
- Mybatis基础入门学习
Mybatis基础入门学习 mybatis架构分析 搭建测试mybatis架构 )下载并导入mybatis3.2.7.jar(架构),mysql-connector-java-5.1.7-bin.ja ...
- 《零基础入门学习Python》【第一版】视频课后答案第001讲
测试题答案: 0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方 ...
- 零基础入门学习Python（1）--我和Python的第一次亲密接触
前言 最近在学习Python编程语言,于是乎就在网上找资源.其中小甲鱼<零基础入门学习Python>试听了几节课,感觉还挺不错,里面的视频都是免费下载,小甲鱼讲话也挺幽默风趣的,所以呢,就 ...
- 学习参考《零基础入门学习Python》电子书PDF+笔记+课后题及答案
国内编写的关于python入门的书,初学者可以看看. 参考: <零基础入门学习Python>电子书PDF+笔记+课后题及答案 Python3入门必备; 小甲鱼手把手教授Python; 包含 ...
- 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案
初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...
- 大牛整理最全Python零基础入门学习资料
大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』 帖子类别:『人工智能』 阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...
- 小甲鱼零基础入门学习python--课后作业
[小甲鱼零基础入门学习python--课后作业] 小甲鱼零基础入门学习python--课后作业 本章内容: 1.基础部分的作业 2.函数部分的作业 3.字典.集合.文件部分作业 4.异常 5.Easy ...
随机推荐
- seaborn
Seaborn是基于matplotlib的Python数据可视化库. 它提供了一个高级界面,用于绘制引人入胜且内容丰富的统计图形. 一 风格及调色盘 风格 1 sns.set() 模式格式 2 s ...
- QTP 11 补丁大全
原文: http://relevantcodes.com/qtp-11-0-patches/ Patch Link Details Support for Chrome 19 QTPWEB_00102 ...
- R语言中的几种数据结构
R语言中的几种数据结构 一 R中对象的5种基本类型 字符(character) 整数 (integer) 复数(complex) 逻辑(logical:True/False) 数值(numeric: ...
- Linq查询语法(1)
转:http://www.cnblogs.com/ahao214/archive/2013/01/22/2871044.html LINQ的基本格式如下所示:var <变量> = from ...
- oracle--序列&视图&索引&视图&可视化操作&分页&数据库备份
--oracle学习内容--oracle的管理系统学习--oracle的数据管理学习--oracle的用户管理--oracle二维表管理--oracle的其他知识 --oracle的序列.视图.索引 ...
- Struts2入门1
Struts2的概述: Struts2是应用在Javaee三层结构中的web层.Struts2是在Struts1和webwork的基础之上发展的全新的框架.在没有使用Struts2之前,进行web层的 ...
- Java相关面试题总结+答案（八）
[RabbitMQ] 135. RabbitMQ 的使用场景有哪些? 抢购活动,削峰填谷,防止系统崩塌. 延迟信息处理,比如 10 分钟之后给下单未付款的用户发送邮件提醒. 解耦系统,对于新增的功能可 ...
- Apache服务（基于IP地址，主机名，端口号）
安装Apache服务程序 需要注意apache服务程序的软件包名称叫做httpd,因此直接执行yum install apache则是错误的. [root@liuxuanke-hbza ~]# yum ...
- User-Agent结构介绍及主流浏览器User-Agent大全
User-Agent结构介绍及主流浏览器User-Agent大全:https://blog.csdn.net/qianxing111/article/details/79415857 一.基础知识篇: ...
- SpringBoot-Vue实现增删改查及分页小DEMO
前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...