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中常用的转义字符:
不换行空格 > >右尖括号 < <左尖括号
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>