html基础_自整理-优快云博客

本文详细介绍了HTML的基本概念，包括HTML的定义、网页与网站的区别、XHTML的特点、HTML的基本结构、语法规范、字体标记、列表应用、超链接与图像的使用、路径设置、注释的添加、表格制作以及表单的设计，是初学者掌握HTML技能的理想指南。

html基础

一.相关定义
1.html：hyper text markup language，超文本标记语言
2.网页：一个html文件就是一个网页
3.网站：把所有的网站资源问价（HTML,CSS,JS,图片，视频等）整合到一起的一个文件夹
4.XHTML：可扩展的超文本标记语言（EXtensible Hyper Markup Language）变现和html类型，但更严格
5.html基本结构：

<!doctype html>命名文档类型
<html>说明我们写的是标记语言
	<head>文件头部(描述区)
	<meta charset=“utf-8”/>编码格式(gb2312/gbk中文编码)
	<title>html5</title>文件标题（显示在状态栏上的内容） </head>
	<body> 文件主体(所有要写的内容)</body>
</html>

6.HTML语法：
1）<>里面第一个单词为标记，标签，元素
2）标记属性用空格隔开，属性和属性值用等号来连接，属性不分先后，属性值放在双引号内
3）空标记没有结束标签的标记，必须使用"/" 例如<hr //>
7.标题字体

	<h1></h1> 一级标题，唯一性，网站LOGO
	<h2></h2> ~ <h6></h6> 二 ~ 六及标题

8.字体标记

	<p></p> 段落标记
	<i></i> | <em></em2> 设置倾斜字体
	<b></b> | <strong></strong> 设置字体加粗
	<u></u> 设置文本下划线
	<br /> 空标记，用来设置字体换行

9.字符实体
html中常用的转义字符：

	&nbsp; 不换行空格  &gt; >右尖括号  &lt; <左尖括号

10.列表（ul, ol, dl）
1) 无序列表

	<ul>
		<li></li>
	</ul>

2）有序列表

	<ol type="a" start="6"> 
		<li>默认为1234</li>
		<li>type 为a 为abcd顺序</lii>
		<li>type 为A 为ABCD顺序</li>
		<li>type 为i 小写罗马数字为i,ii,iii,iv顺序</li>
		<li>type 为I 大写罗马数字</li>
		<li>start 为有序列表开始节点</li>
	</ol>

3）自定义列表

	<dl>
		<dt></dt>
		<dd>解释（definition description）</dd>
	</dl>

11.超链接和图像

<a href="目标我呢见路径或者链接地址" title="提示文本">链接文本或者图片</a>
<a href="#">空链接</a>
<! target 属性参数定义了打开链接的目标窗口 _blank 在新窗口中打开链接，页面会保留原窗口>
<! _self 在当前窗口中打开链接页面，为默认值>
<img src="图片的路径" border="边框" alt="图片替换文本" title="图片标题" width="" height="" />
<! src图片的来源 title 鼠标悬停显示提示信息，alt当图片不显示的时候，提示的信息>

12.相对路径与绝对路径
相对路径写法，以a标签为例：

1、相对路径链接（上级找下级） <a href="news/news.htm">新闻中心</a>
2、相对路径链接（下级找上级） <a href="../news.htm">新闻中心</a>
3、 相对路径链接（同级链接） <a href="news.htm">新闻中心</a>
4、链接到其他站点的链接      <a href=“http://www.baidu.com”>百度</a>

13.html注释

<!- -注释的内容- ->

14.表格

<table>
	<tr>
    	<td>列，单元格</td>
    </tr>
</table>

注释：
注：一对tr表示一行;一对td表示一个单元格（一列）
*表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"    取值：left、right、center、 valign=“垂直对齐” top\bottom\middle  
8）合并单元格属性：(td)   合并列： colspan=“所要合并的单元格的列数"   合并行： rowspan=“所要合并单元格的行数”

15.表单：用来收集用户的信息
1）表单框

		<form name=“表单名称” method=“post/get”  action=“路径"> </form>

2）表单控件

		<input  type=“”  name=“”  value=“” size=“”  maxlength=" "    />

		type 表单控件类型 大概十几种
		input 标记可以创建按钮文本输入框选择框等各种类型的输入字段
		name 表单域的名称
		value 表单域的默认值，其他属性根据type的不同而有所变化
		maxlength 最多输入的字符数
		size 控制框的宽度（以字符为单位）

	<input type="text" value="默认值"/> 文本框
	<input type="password" /> 密码框
	<input type="submit" value="按钮内容" /> 提交按钮
	<input type="reset" value="按钮内容" /> 重置按钮
	<input type="button" value="按钮内容" /> 空按钮
	<input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/> 单选按钮，默认选中
	<input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" /> 复选框组 *disabled="disabled" (禁用) *checked="checked"   (默认选中)

3）表单域下拉菜单

	<select >  
     	<option>下拉选项1</option>
     	<option>下拉选项2</option>
	</select>
	表单域多文本定义：
	<textarea  name=""  cols=""  rows="" > </textarea>