一、HTML的一些基本描述

　　全称：Hyper Text Markup Language

　　定义：超文本标记语言，是标记语言而不是编程语言，使用标记标签来描述网页，所以也被称为网页

　　格式：标签对里面放纯文本，网页显示时对这些标记解释，然后显示文本

二、HTML的标签

  1. 标题（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的样式

  1. 外部样式表

　　<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的头部

  1. <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基础学习总结的更多相关文章

  1. salesforce 零基础学习（五十二）Trigger使用篇（二）

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  2. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  3. IOS基础学习-2: UIButton

    IOS基础学习-2: UIButton   UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...

  4. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  9. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

  10. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

随机推荐

  1. python 位置参数和关键字参数 *args **kwargs

    #!/usr/bin/env pythondef foo(*args,**kwargs): print('args: {0}'.format(args)) print('kwargs {0}'.for ...

  2. 【VSC】git+github/码云+VSCode

    VSCode中使用git,参见. (零)Git安装 在初次使用时如果本地没有安装git会提示先安装git,然后重启vscode. (一)本地操作项目前提: 1)若本地没有git拉取下来的项目,用git ...

  3. 记Macbook Pro配合FT232使用PN532模块

    0x00实话. 被自己傻到 在linux下使用 libusb + libnfc 这两个库就可以配合串口直接使用pn532模块 当时配置文件是写在 /etc/nfc 目录下的 而我在OS X 下居然也想 ...

  4. 六、Delphi10.3通过Json.Serializers单元对大量数据序列化

    一.参考我之前的博客,Delphi可以很方便的把类和结构体转换成JSON数据,但是数据量大了,就会非常之慢,1万条数据需要20秒左右.如果引用Serializers单元,那么100万数据只需要4秒左右 ...

  5. IIS中多域名多网站的设置方法

    一个 IP 可以绑定多个域名.如您需要实现多个域名访问同一个网站,只需就不同域名添加 A 记录指向同一个 IP 即可. 如您需要实现多个域名访问同一虚拟服务器上不同网站,也需要就不同域名添加 A 记录 ...

  6. mfc 类的const对象

    知识点 类的const对象 const类的成员函数 一. 类的const对象 const 意谓着只读 意谓着所标记的类成员变量不成出现在=号的左边. 构造函数除外. ,,); //比如在存放出生日期的 ...

  7. c++ 二叉树的遍历

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...

  8. 【转载】屏幕坐标向3维坐标的转化-DXUT的CD3DArcBall类

    原文:http://blog.csdn.net/bluekitty/article/details/6070828 3D应用程序中,我们可以通过鼠标进行空间中物体的旋转和视角的变换等,而鼠标的移动是2 ...

  9. void与NULL详解

    void 是 “空”类型(无值型),意思是这种类型的大小无法确定. 并不存在void类型的对象,所以也就不能声明void类型的对象或者将sizeof()运算符用于void类型,C++/C语言不能对一个 ...

  10. 【BZOJ1070】[SCOI2007]修车

    [BZOJ1070][SCOI2007]修车 题面 以后要多写题面flag 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 ...