HTML基础知识总结

上周开始跟着我赢职场的视频学习PHP，下面是HTML基础的笔记。

一、html文字标记<i></i> 定义斜体文本
<strong></strong>文本粗体
小写上标
小写下标

<font></font>可以修饰文本大小，颜色等，size，color，face：字体···

 <meta>:提供网页的元信息，有两个属性：

1】http-equiv

设置网页的字符集：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

网页自动刷新：

<meta http-equiv="refresh" content="2"> //每隔2秒钟，自动刷新网页一次

<meta http-equiv="refresh" content="2";url="http:baidu.com" > //2秒钟后，跳转到凤凰网

2】name属性

设置网页的搜索关键字、版权信息、作者等

关键字：<meta name="keywords" content="关键字1，关键字2..."/>

设置网页信息：<meta name="description" content="网页信息内容"/>

二、html 

<br/> 换行标记
<p></P> 段落标记，上下都加空行，而且换行
<hr/> 划线标记，width:长度，size：高度，color
<hn></hn> 标题标记   n:1~6

<ul> 无序列表，常用属性，Type:项目符号的类型，取值：desc(小黑点)、circle（空心圆）、square（小方块）

       <li>内容1</li>

       <li>内容2</li>

       <li>内容3</li>

</ul>

<ol> 有序列表，常用属性，Type:编号类型，取值：1,a,A,i,I；start：从第几个开始编号，为数字

       <li>内容1</li>

       <li>内容2</li>

       <li>内容3</li>

</ol>

 

<img src="图片路径" /> 图片

路径规则：
1.相对路径：F:\App\www\imgs\1.jpg  (带盘符F)

2.相对路径：

平级：直接写文件名称
在html的下级目录：  目录名称/文件名称,如：  imgs/1.jpg

在html的上1级目录： ../文件名称

在html的上2级目录：../../文件名称

 

三、实体，查看HTML手册把字符、控制符进行转换

空格：&nbsp;
" &quot;  
' &prime;
< &lt;

> &gt;

￥ &yen;

× &time;

÷ &divide;

 

四、html <a>，超链接，点击后发生跳转的文字，图片或其他页面元素

<a href="网页路径">页面上显示的元素</a>
1.外网：路径必须是全路径 http:www.baidu.com
2.内网：相对路径

图片作为超链接：

<a href="http://www.baidu.com"> <img src="图片路径"></a>

特殊链接： 

1.下载链接：浏览器不能直接执行的文件，都会提示下载

2.邮件链接：href="mailto:邮箱地址"

3.普通空链接：href="#"

4.JS链接：例子：<a href="javascript:window.close()">关闭窗口</a>

5.锚点连接：是在一个网页不同区域进行跳转。

<1>定义锚点 <a name="锚点名称"></a>

锚点名称的命名规则：可以包含字母、数字、下划线，但只能以字母开头。注意，<a>和</a>之间没有内容

<2>跳转到锚点<a href="[文件名]#锚点名称">...</a>

文件名：可有可无，同一个网页不用文件名

 

五：table

<table></table>表格标记
<tr></tr>行

<td></td>列

1.table属性：

border：表格的边框粗细

bordercolor：边框颜色

rules：合并边线，rules="all"

align：表格水平位置，center，left，right
width：表格的宽度
height：表格的高度
cellpadding：文字距离边框的距离
cellspacing：边框的厚度
bgcolor：背景色
background：背景图，当背景图宽度和高度<表格宽度和高度时，平铺（重复），>时，从左上角引用图片的一部分

2.tr属性，只控制该行内容：

align——center，left，right，水平：行中内容的左中右

height，行高

valian——top，middle，bottom，垂直：行中内容的上中下

3.td属性，只控制该列内容：

align——center，left，right，列中内容的左中右

valian——top，middle，bottom，列中内容的上中下

width，列高（影响整列的宽度）

height，行高（影响整行的高度）

colspan=“列数” 合并列

rowspan="行数" 合并行

注意：行列都有合并，先列后行

 

六：form表单，主要是用来和用户交互的

<form> </form>表单

1.input

<input type="元素名称"/>

checkbox复选框，value="隐藏起来"，处理传递时候用,checked="checked"默认选中项

file：上传控件

hidden：隐藏域，value="值"，和php脚本程序交互

password：密码框

radio：单选框，排他效果，name要相同

text：文本框

 

 

 

2.非input元素

<select>   <option >广东省</option> </select>下拉列表，selected="selected"默认选中项

 

<select name="city">
     <option value="中山" >中山</option>
     <option value="深圳" >深圳</option>
     <option value="广州" >广州</option>
</select>

textarea：多行文本框，cols:文本列数，rows：文本行数，没有滚动条，cols+2

 

 <form>属性：

• name：表单的名字，主要给JS用来做客户端表单验证
• method：表单的提交方式，取值：get或post
• action：指定表单的处理程序，一般为php
• enctype:指点表单数据的编码方式（解密方式），这个属性只能用在method="post"的情况，有两个取值：application/x-www-form-urldecoded（默认的加密方式）和multipart/form-data（有上传文件，必须用这个）

GET方法和POST方法：

1.get提交方式（基本不用）

get方法是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求

 如果某个表单元素，不想往服务器传递数据，就不要加name属性

 get方式的特点：

• 不能提交敏感数据
• 只能提交少量数据
• 不能上传附件

 2.post提交方式

post提交方式，直接传给表烦处理程序

post方式的特点：

• 提交的数据相对安全
• 可以提交海量数据
• 可以上传附件