HTML基础学习总结
一、HTML的一些基本描述
全称：Hyper Text Markup Language
定义：超文本标记语言，是标记语言而不是编程语言，使用标记标签来描述网页，所以也被称为网页
格式：标签对里面放纯文本，网页显示时对这些标记解释，然后显示文本
二、HTML的标签
- 标题（heading）
通过<h1></h1>、<h2></h2>…<h6></h6>来描述，类似于大标题，中标题，小标题，如（省略了头和尾）
<h1>学习HTML--1</h1>
<h2>学习HTML--2</h2>
<h3>学习HTML--3</h3>
浏览器会自动在标题的前后添加一个空行，不要为了产生粗体和大号的文本而用标题
2.段落（paragraph）
通过<p></p>来描述，如
<p>just for test</p>
浏览器会自动在段落的前后添加一个空行，可以通过<br/>来换行，而不用重起一个段落
3.链接
通过<a></a>来描述，如
<a href =”http://www.baidu.com”>This is a link</a>
其中，href是链接的属性，指链接的对象，要写http://，不然这个链接是替换当前目录下的链接（只是原本链接的一部分），不会真的链接到百度
target属性，将其设置为_blank，那么链接会在新窗口打开
链接到同一页面的不同位置，例如：
<html>
<body>
<p><a href="#test">查看 test</a></p>
<h2><a name="test">test</a></h2>
<p>just for test </p>
</body>
</html>
这样，点击查看test文本，页面会自动跳到h2的位置（测试时文本比较多，这里文本太少，跳与没跳没有区别）。上面的文本“查看test”就叫做锚
4.图像
通过<img />来描述，如
<img src="test.png" alt=”test” width="104" height="142" />
替换文本属性alt是在浏览器无法载入图片时显示替换文本
属性align是对图片的排布
将img标签放在a标签内可以将图片作为链接
PS：标签对大小写不敏感，标签应该关闭，虽然浏览器会显示出来。
5.表格
先来一个表格实例，
<table border="1" cellspacing=”5” cellpadding=”10”>
<tr>
<th rowspan="3" align=”left”>跨三行</th>
<td>row,cell</td>
<td>row,cell</td>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
<td>row 1,cell 3</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
<td>row 2,cell 3</td>
</tr>
</table>
表格标签是<table>，行的标签是<tr>，单元格的标签是<td>，<th>标签是将单元格中的文本作为标题（加粗，放大）
表格可以设置很多属性：border设置边框的粗细（0就是没有边框），cellspacing是设置单元格之间的间隔，cellspadding是设置单元格内容和边框之间的空白大小，bgcolor可以设置背景颜色（也可以给单元格设置），background可以设置背景图片（也可以给单元格设置），align可以设置单元格中内容的排布位置
表格还可以用来设计一定的格式排版
6.列表
1) 无序列表----<ul>
列表项标签<li>，type有disc（圆形黑点）、circle（空心圆点）、square（矩形黑点）
2) 有序列表----<ol>
列表项标签<li>，type有1、A、a、I（罗马数字大写）、i（罗马数字小写）
3) 自定义列表----<dl>
列表项标签<dt>，标签<dd>是对<dt>的注释，会缩进
7.表单
一般格式如下：
<form>
****
<input type=”***” name=”***” value=”***” />
****
<br/>
</form>
1) 文本域（Text Fields）
Type字段为text
2) 单选按钮（Radio Buttons）
Type字段为radio，name值相同的项只能选择一个
3) 复选框（checkBoxes）
Type字段为checkbox
4) 表单的动作属性
Type字段为submit，增加form标签的属性action，action指向表达提交的目的文件文件名
5) 下拉列表
<select><option></option></select> 其中option就是下拉选项，可以设置option的属性selectde=”selected”将该option设置为预选项
6) 文本域
<textarea rows=”10” cols=”10”>
7) 按钮
Type字段为button
8.框架
标签<frameset> 作用是将一个浏览器页面拆分，显示多个htm网页
内联框架<iframe>是将网页嵌到另一个网页中，即是在一个网页中显示另一个网页
三、HTML的元素
开始标签和结束标签之间的内容称为元素；空元素的结束标签一般用<****/>这种形式
四、HTML的属性
属性是对元素的更多的描述，比如
<h1 align = “center”>Test</h1> 其中的align属性就是对h1的对齐方式进行描述，此处是居中
<body bgcolor=”blue”></body> 其中的bgcolor属性就是对body的背景颜色进行描述
PS：属性的value要放在引号里面，单双引号都可以
五、HTML的注释
格式如下：
<!-- this is a comment -->
六、HTML的样式
- 外部样式表
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
利用css样式表来改变（类似于渲染吧）网页的外观
2.内部样式表
<head>
<style type="text/css">
body {text-indent:21.0pt">h1 {color:red}
p {margin-left: 20px}
</style>
</head>
通过style标签来改变样式，其中还可以使用div标签
3.内联样式
<p style=”color:red” ></p>
使用标签的属性，这里的属性包含css的所有属性
七、HTML的头部
- <title>
添加html的标题，在浏览器的名称处显示，内容中不显示
2.<base>
为浏览器添加默认的链接地址和默认的target
3.<link>
定义文档与外部资源的关系，常用于链接样式表（css）
4.<style>
定义html在浏览器中的呈现的样式
5.<meta>
元数据，不会显示出来，但是浏览器可以读取这些信息
6.<script>
定义客户端的脚本
八．HTML的script
格式如下：
<script type="text/javascript">
<!--
document.write("<h1>Hello World!</h1>")
-->
</script>
<noscript>Not support JS</noscript>
其中的注释是为了避免低版本的浏览器不支持脚本语言，支持脚本语言的浏览器会忽略注释，此处的注释必须换行
<noscript>标签是为了在浏览器不支持脚本语言时显示提示信息
HTML基础学习总结的更多相关文章
- salesforce 零基础学习（五十二）Trigger使用篇（二）
第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...
- 如何从零基础学习VR
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...
- IOS基础学习-2: UIButton
IOS基础学习-2: UIButton UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...
- HTML5零基础学习Web前端需要知道哪些？
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- python入门到精通[三]:基础学习(2)
摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...
- python入门到精通[二]:基础学习(1)
摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- Yaf零基础学习总结5-Yaf类的自动加载
Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...
- Yaf零基础学习总结4-Yaf的配置文件
在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...
- qml基础学习 Canvas画笔
一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...
随机推荐
- MySQL（四）执行计划
转载自:Oo若离oO,原文链接 在MySQL中使用explain查询SQL的执行计划 目录 一.什么是执行计划 二.如何分析执行计划 一.什么是执行计划 要对执行计划有个比较好的理解,需要先对MySQ ...
- RabbitMQ如何保证发送端消息的可靠投递
消息发布者向RabbitMQ进行消息投递时默认情况下是不返回发布者该条消息在broker中的状态的,也就是说发布者不知道这条消息是否真的抵达RabbitMQ的broker之上,也因此会发生消息丢失的情 ...
- KVM虚拟机IO处理过程(一) ----Guest VM I/O 处理过程
虚拟化技术主要包含三部分内容:CPU虚拟化,内存虚拟化,设备虚拟化.本系列文章主要描述磁盘设备的虚拟化过程,包含了一个读操作的I/O请求如何从Guest Vm到其最终被处理的整个过程.本系列文章中引用 ...
- vue实现首页导航切换不同路由的方式
vue实现切换首页路由导航 ,根据切换的不同导航跳转不同的路由,以及当前选中的导航添加选中样式. html代码: <nav> <!-- 导航栏 --> <div cla ...
- Linux—文件命令之touch命令
下面总结一下对于文件的操作命令: satat命令:用于显示文件的详细信息,包括文件.设备.gid.各种时间等. 命令格式:stat filename touch 的两个功能: 1.新建文件,如需建立特 ...
- swt TableViewer
http://blog.163.com/bluefield_wild/blog/static/8182709520085612235336/ package list; import java.uti ...
- # 2017-2018-1 20155302 课下实践IPC及课上补充
课上实践补交 题目二要求: 学习使用stat(1),并用C语言实现 提交学习stat(1)的截图 man -k ,grep -r的使用 伪代码 产品代码 mystate.c,提交码云链接 测试代码,m ...
- centos7 svn搭建
一.安装 : yum install subversion 二.检验是否安装成功: svnserve --version 三.创建要存放资源的路径: mkdir -p /var/svn //该路径也是 ...
- Kubernetes学习之路（十六）之存储卷
目录 一.存储卷的概念和类型 二.emptyDir存储卷演示 三.hostPath存储卷演示 四.nfs共享存储卷演示 五.PVC和PV的概念 六.NFS使用PV和PVC 1.配置nfs存储 2.定义 ...
- Storm 第三章 Storm编程案例及Stream Grouping详解
1 功能说明 设计一个topology,来实现对文档里面的单词出现的频率进行统计.整个topology分为三个部分: SentenceSpout:数据源,在已知的英文句子中,随机发送一条句子出去. S ...