freesec

PHP前置知识-HTML学习

HTML学习

1、因特网和万维网

1.1、Internet因特网：全球资源的总汇，连接网络的网络

1.2、TCP/IP 协议簇：传输层/网络层协议

1.3、万维网：www（world wide web）

HTTP超文本传输协议

作用：接受和发布 HTMl 页面
URL 统一资源定位符

协议://域名:端口号/文件路径/文件名.文件后缀

http://www.QQ.com.cn:80/tq/index.html

1.4、W3C 组织负责制定 web 行业的标准

2、HTML

2.1、**超文本标记语言 **(Hyper Text Markup Language)

2.2、标签：对当前的内容进行规范

单标签<标签名/>
双标签<标签名>

2.3、属性：对当前的标签中的内容进一步修饰

2.4、网页

静态网页文件扩展名为 .html 或 .htm
动态网页文件扩展名为 .jsp 或 .aspx、.asp、.php 等

2.5、HTML 注释：

3、HTML 标签和属性

3.1、标签


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-sacle=1"/>


<meta name="keywords" content="测试" />


<meta name="description" contend="测试页面" />


<meta http-equiv="X-UA-Compatible" content="IE=edge" />


<link rel="icon" href="img/1.jpg" />


<title>我的 第2个页面title>

3.2、标签

背景：background 设置网页的背景图
文本：text 设置网页的文本颜色
左边距：leftmargin 设置网页中的内容到左边距之间的距离
左边距：topmargin 设置网页中的内容到顶部距之间的距离
颜色属性：bgcolor 设置网页的背景颜色

3.3、

-

标题标签

该标签属于块级标签，该标签独立占据一行，该行不允许其他标签出现
style 属性：设置样式
align 属性：设置标题文字的水平对齐方式
align取值范围：left 居左；right 居右；center 居中；justify：两端对齐

3.4、换行标签

3.5、

分割线

size 属性：设置分割线的高度
color 属性：设置分割线颜色；一旦设置颜色将失去 3D 效果
width 属性：设置分割线宽度
align 属性：设置对齐方式

3.6、

段落

作用：定义段落
属性：align 设置段落文字的水平对齐

3.7、图片

图片的格式：JPG、GIF、PNG、BMP等
作用：显示图片
src 属性：指明图片位置（相对路径，绝对路径）注意：图片的路径尽量不要出现中文。
alt 属性：图片无法显示时的替代信息
title 属性：提示信息
width 和 height 属性：图片的宽度和高度
align 属性：设置周围文本对齐方式；（bottom 默认的；middle；top）
align 属性：使图片浮动到段落的左边或者是右边；（left；right）

3.8、font 定义字符

作用：定义字符的相关样式
face 属性：定义字体，默认宋体
color 属性：定义字体颜色
size 属性：字号，最大为 7，大于 7 全部按 7 号显示
在 HTML 4.01 中，font 元素不被赞成使用。
在 XHTML 1.0 Strict DTD 中，font 元素不被支持。

3.9、超链接

作用：超级链接

1、实现页面之间的跳转

2、页内跳转

3、mailto

4、资源下载

<a name="top">我就是顶部<br />a>
		<img src="img/1.jpg" /><br />
		<img src="img/1.jpg" /><br />
		<img src="img/1.jpg" /><br />
		<img src="img/1.jpg" /><br />
		<img src="img/1.jpg" /><br />
<a href="#top">返回顶部a>

3.10、标签

范围标签：显示某行内的独特样式

<p>手机<span style="color:red;font-size:36px;">￥100span>元一部p>

311、有序列表

<ul>
    <li>数码li>
    <ul>
        <li>笔记本li>
        <li>手机li>
        <li>电脑li>
    ul>
    <li>美容li>
    <li>服装li>
ul>

3.12、无序列表

<ol>
    <li>确认购物li>
    <li>付款li>
    <li>确认收货li>
    <li>付款li>
    <li>付款给商家li>
    <li>双方评价li>
ol>

3.13、定义列表（图文混排）


<dl>
    <dd>描述信息dd>
    <dt>图片dt>
dl>

3.14、float 属性：浮动

float 属性值：left 元素向左浮动；right 元素向右浮动；none 默认值，元素不浮动，并会显示在其文本中出现的位置

3.15、clear 属性：清除浮动

clear 属性值：left 在左侧不允许浮动元素；right 在右侧不允许浮动元素；both 在左右两侧不允许浮动元素；none 默认值，允许浮动出现在元素左右两侧

3.16、当前元素和外围的元素之间的间隔

元素的外边距：margin、margin-top、margin-left、margin-right、margin-bottom

3.17、当前元素和内部嵌套元素之间的间隔

元素的内边距：padding、padding-top、padding-left、margin-right、margin-bottom

3.18、标签在 HTML5 中，专门用于视频资源的播放

标签的属性：controls 控制面板；autoplay 自动播放；loop 循环播放

3.19、标签在 HTML5 中，专门用于音频资源的播放

标签的属性：controls 控制面板；autoplay 自动播放；loop 循环播放

3.20、其他标签

<b>加粗内容b><br />
<strong>加粗内容strong><br />
<i>倾斜内容i><br />
<u>下划线u><br />
<s>删除s><br />
<s>原价：￥1888s>

3.21、空格

3.22、版权

3.23、路径

相对路径：从文件自身出发去寻找其他资源路径
绝对路径：目标文件的完整路径：http://www.sina.com.cn/sport/ac_milan.gif
物理路径：对于当前计算机而言，即本地磁盘文件路径

4、表格

表格：行和列组成

作用：显示数据

<table border="1" cellspacing="5" cellpadding="0" width="500px" height="200px" align="center" bgcolor="blue">
    
    <tr align="center">
        
        <td colspan="2">测试td>
        <td rowspan="2">测试td>
    tr>
    <tr align="center">
        <td>测试td>
        <td>测试td>
    tr>
    <tr align="center">
        <td>测试td>
        <td>测试td>
        <td>测试td>
    tr>
table>

不规则表格要合并单元格

colspan 属性：跨列

rowspan 属性：跨行

数最大行数和列数，制作表格；合并单元格；删除多余的单元格

5、表单

5.1、核心标签

；其属性包括：

id：该标签在当前页面的身份
name：该标签在当前文档中的名称
method：客户端向服务器提交数据的方式（常见 get 、 post 两种）
- get：所提交的数据不进行加密处理，客户端浏览器地址栏可以直接看到提交的数据（数据写在请求头），同时表单提交数据大小不允许超过 128k 。应用场景：非安全或非关键数据。
- post：所提交的数据全部进行网络安全加密，无法被客户端所截获，保证提交数据的安全性（数据写在请求体），并且提交数据的大小无限制。应用场景：安全数据或关键数据。
action：客户端提交数据的目的地址和资源位置
enctype：当表单中存在组建上传时必须使用标签设置表单的数据模式，添加此属性，将表单的数据以二进制格式提交服务器。而且 method 属性必须是 post
onSubmit：当表单需要在提交数据前进行验证的时候须添加该属性，该属性与 js 动态脚本关联，达到表单提交前的数据验证，若验证不通过则不提交服务器。在 HTML5 版本下，很多表单元素自带基本验证机制，因此该属性使用频率也在下降

5.2、文本框

标签：

属性： name，value，size（文本框的长度），maxlength（文本框可填写的字数），readonly（只读）placehoder（占位符，提示信息），required（表单提交时的非空验证）

5.3、密码框

标签：

属性： name，value，size，maxlength，readonly，placehoder

5.5、单选框和复选框

标签：；

属性： name，value，checked（默认选择），disabled（不可选）

5.6、文件输入框

标签：

注意：当含有上传域时要设置编码方式为 enctype="multipart/form-data

<form action="#" method="post" enctype="multipart/form-data">
		请选择您要上传的文件：<input type="file" />
form>

5.7、多行文本框（文本域）

标签：

属性： name，rows，cols，readonly

5.8、下拉列表