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>标签是为了在浏览器不支持脚本语言时显示提示信息
最新文章
- matrix(No.1)operations
- IOS实现动画的几种简单方法
- Oracle自动备份脚本(网上找到的资料)
- UVALive 3415 Guardian of Decency(二分图的最大独立集)
- TreeSet介绍
- 一个好用且方便的FastCgi C++库 - FastCgi++
- 配置oschina for pc 开发环境
- oc学习笔记2
- C# @字符用法
- 【Tomcat】batch获得war包
- iOS开发之二:UIWindow与UIView
- 转载----开发者大杀器 —— 刨根问底,揪出 Android App 耗电的元凶代码
- centos开发环境安装的备忘
- thinkphp调用微信jssdk开发
- MyBatis关联查询,一对一关联查询
- Docker01 CentOS配置Docker
- C#学习笔记(3)——操作sqlserver数据库增删改查
- 记一个小bug的锅
- shell命令技巧——文本去重并保持原有顺序
- centos 安装jenkins
热门文章
- no persistent volumes available for this claim and no storage class is set FailedBinding -- nfs --存储
- 关于redis常用命令
- python基础学习1-装饰器及应用
- Python day1 ---python基础1.1
- 【CJOJ2433】陌上花开 CDQ分治
- 安装QConf 报错及解决方案
- Python 安装与专属 IDE_Pycharm 安装配置、永久激活,赠汉化版!
- MongoDB中设置expire过期自动删除
- Vue2.0原理-模板解析
- c语言数字图像处理(六):二维离散傅里叶变换