从零开始学习前端开发

一、web标准

web标准-网页制作的标准，它是由一系列标准组成的，主要包含三个方面：结构（html,xhtml）,表现（css）,行为（javascript）

注：结构和表现的标准由w3c（万维网联盟）制定，行为标准由ECMA（欧洲电脑厂商联合会）制定

二、html相关概念

1.html—超文本标记语言

2.xhtml—可扩展的超文本标记语言

3.html5—html的第五次重大修改

注：html和xhtml的区别：

XHTML规范：必须小写，有开始结束标签，属性也用双引号。

HTML规范：不区分大小写，有开始和结束标签，也可把结束标签放在开始标签里，如：<input type='text' /> 。属性可用双引号、单引号(必须配对使用)。

xhtml相对于html并没有增加新的标签，只是语法要求更加严格，比如：标签必须闭合，标记名称必须小写等

三、html基本结构

1.文档声明

html5的文档声明语法： <!DOCTYPE html>

作用：告知浏览器文档使用哪种 HTML 或 XHTML 规范

2.html是网页的根元素或根标签,所有的网页内容和标签都放在html标签之间

语法： <html></html>

3.html包含了两大部分：head部分和body部分

head部分：一般设置meta头元素或引入一些外部的css文件，js文件等以及关键词，描述

设置字符编码：

其他编码格式：gb2312,gbk

body部分：所有要在网页中显示的内容及放置内容的标签都放在body部分

HTML5 基本结构 （新建一个html文件时默认有那些代码）
<!DOCTYPE html>命名文档类型
<html></html>说明我们写的是标记语言
<head></head>文件头部
<title></title>文件标题（显示在状态栏上的内容）
<meta charset="utf-8" />编码格式
<body></body>文件主体(所有要写的内容)

四、html基本语法

1.常规标记

语法： <标记属性="属性值" 属性="属性值"></标记>

eg: <div class="box" id="main"></div>

2.空标记

语法： <标记属性="属性值" />

eg: <img src="1.jpg"/>

注：a）属性和属性值用等号连接，属性值要放在双引号中（所有标点符号都必须是英文状态下的）

　　b）标记名称全部使用小写（标准）

　　c) 属性和属性之间用空格隔开，不分先后顺序

五、html常用标记

1.网页标题语法： <hx>网页标题内容</hx> (x为1-6)

eg： <h3>我是标题</h3>

2.段落文本语法： <p>段落文本内容</p>

3.空格html转义字符：  

注：常用其他转义字符：

HTML转义字符表

4.强制换行语法： <br/> (空标记)

5.加粗语法：

　　　<strong>加粗文本内容</strong>

　　　 <b>加粗文本内容</b>

6.倾斜语法：

　　 <em>倾斜文本内容</em>

　　 <i>倾斜文本内容</i>

7.水平分隔线语法： <hr/>

　　 <hr align="left" size="3" width="50%"/><!--水平线，起到分割的作用-->
    <hr align="center" size="3" width="50%"/>
    <hr align="right" size="3" width="50%"/>
    <hr noshade/>
    <!--align 左对齐 右对齐 居中-->
    <!--size 粗细 单位像素-->
    <!--color颜色-->
    <!--width宽度（就是这条线有多长） 50%表示的是父层宽度的50%-->
    <!--noshade (没有属性值的属性) 不要阴影 -->

8.上标和下标语法： <sup></sup> 上标　　 <sub></sub> 下标

9.无序列表语法：

　　 <ul>

ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;

10.有序列表语法：

注：type用来设置序号的类型，可以设置A,a,i,I,1

　　start用来设置从几开始

eg:代码：

    <ol type="a" start="2">
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
        <li>今天天气不错，阳光明媚！适合敲代码！</li>
    </ol>

　　效果：（默认序号类型是数值，设置属性type=“a”起作用，是从b开始 start属性作用）

11.自定义列表

语法： <dl>
　　　　<dt>A</dt>
　　　　<dd>a1</dd>
　　　　<dd>a2</dd>
　　　　...
　　　　<dt>B</dt>
　　　　<dd>b1</dd>
　　　　<dd>b2</dd>
　　　　...
　　　</dl>

注：dt和dd是并列关系

　　在dl中可以存在多组dt,dd,每组中只能存在一个dt，可以存在多个dd

12.图片语法： <img src="图片路径" width="数值" height="数值" alt="替换文本" title="提示文本"/>

注：alt和title的区别

　　title是当鼠标悬停在图片上时要显示的提示信息

　　alt是当图片由于某些原因无法正常加载时要显示的替换信息

　　　　　<img src="data:images/picture.jpg" border="2" width="200">
 
        <!--
          图片路径        src(相对路径)
          宽度            width
          高度            height
          边框粗细        border
          水平对齐方式    align   left/center/right
          -->
        <!--如果想要等比例缩放，就只能给宽或高，二者中的一个-->
 
        <!--img align="center" 不可以实现图片居中的-->
        <!--div做桥,将图片放在div中，然后设置div中的内容居中-->
        <div style="text-align:center;">
            <img src="data:images/picture.jpg" align="left"/>
        </div>

相对路径的三种写法：

1.当当前文件和目标文件在同一目录下，写法如下：目标文件名+扩展名

2.当当前文件和目标文件所处文件夹在同一目录下，写法如下：目标文件所处文件夹名/目标文件名+扩展名

3.当当前文件所处文件夹和目标文件所处文件夹在同一目录下，写法如下：../目标文件所处文件夹名/目标文件名+扩展名

注：../是指返回到上一级目录

13.超链接语法：<a href="http://链接地址或链接文件" target="_blank" title="提示信息">链接文本或图片</a>

注： target属性用来设置超链接是否在新窗口打开

　　target="_blank" 链接在新窗口打开

　　target="_self" 默认值，在本窗口打开

注：空链接 <a href="#">新闻资讯</a> （跳转到页面的顶部）

14.表格作用：显示数据（多用于后台管理）

标签释义：<caption></caption>：表头信息。

　　　　　<tr></tr> ：定义一个表格行；

　　　　　<th></th> ：定义一个表格头；自带居中效果，若是纯文字，默认会以粗体的样式表现。

　　　　 <tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。

　　　　　<td></td> ：定义一个单元格；

语法：

<table border=0 title="测试">
    <caption> 表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type=text /></td>
        <td><input type=text /></td>
    </tr>
</table>

注：*表格相关属性：

（1）border 设置边框的宽度

（2）cellspacing 设置单元格之间的间距

（3）cellpadding 设置内容和单元格之间的空隙

（4）align="left|center|right" 设置单元格内容的对齐方式

（5）width 设置单元格的宽度

（6）height 设置单元格的高度或者tr的高度

（7）colspan="数值" 合并列（给td加）☆

（8）rowspan="数值" 合并行（给td加）☆

　　高级属性

（1）合并相邻单元格边框☆

　　语法： border-collapse:collapse(合并相邻单元格边框)|separate(边框分开);

　　注： border-collapse给table加

eg：

不设置border-collapse 属性，默认值separate

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格高级属性</title>
    <style type="text/css">
    .tab{
        /*border: 1px solid black;*/
    }
    .tab td{
    border:1px solid black;
    padding:5px 10px;
    text-align: center;
}
    </style>
</head>
<body>
    <table class="tab" cellpadding="0" cellspacing="5" >
        <caption>测试数据</caption>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
    </table>
</body>
</html>

浏览器显示：

当我们设置border-collapse ：collapse时浏览器显示的效果：

2.定义表格标题的位置(给table加)语法：caption-side:top|bottom|left|right;

注：left和right只有火狐识别

　　caption是一个块状元素

3.设置单元格的间距(给table加)语法：border-spacing:数值+单位;

注：当设置了border-collapse:collapse;时,border-spacing会失效

4.隐藏或显示无内容单元格(给table加)语法：empty-cells:show(显示)|hide(隐藏);

5.表格布局算法(给table加)语法： table-layout:fixed|auto;

注：当设置为fixed的时候，单元格宽度固定，不随内容多少发生变化

.tab3{
    table-layout: fixed;
}
 
    <table class="tab3" width="400" border="1" cellspacing="0" cellpadding="0">
        <tr height="30">
            <td width="300">jkfdjkdsjfkdsjfkdsjfkjdsfkjdskfjdskfjdskfjdskfjdskfjdskfjdskjfdsjfdsfds</td>
            <td width="100">1010101020030020303030004004</td>
        </tr>
    </table>

浏览器显示效果：

表格相关html属性

1.设置单元格内容水平对齐方式

align="left|center|right"

2.设置单元格内容垂直对齐方式

valign="top|middle|bottom"

3.设置表格分隔线

rules="rows|cols|all|groups|none"

rows 行分隔线　　cols 列分隔线　　all 行分隔线和列分隔线　　groups 组分隔线　　none 没有分隔线

4.表格行分组

5.表格列分组

注：推荐使用colgroup进行列分组

span的默认属性值为1，一列为一组，设置为几即为几列为一组

着重释义：

　　colspan : 表示横向合并单元格 ( )　　　　　　　　　　　　　　rowspan ：表示纵向合并单元格 ( )

六、表单

作用：用来搜集用户信息

语法：<form method="" action=""></form>

注：所有的表单控件都要放在form标签之间

1.文本框

语法： <input type="text" value="admin" name="username"/>

注：value用来设置默认值

name属性主要供后端获取输入的内容或信息

2.密码框

语法：<input type="password"/>

3.提交按钮

语法： <input type="submit" value="登录"/>

注：提交按钮的默认value值为提交或提交查询，可重新设置需要的value值

4.重置按钮

语法： <input type="reset"/>

5.单选按钮

语法：<input type="radio" name="***" checked="checked"/>

注：使用单选按钮时，一组中的单选按钮必须添加一致的name属性值，才能实现多选一的效果

　　设置checked属性可以实现页面加载完成后添加默认选中状态

　　当属性和属性值相同时，可以省略属性值，如checked="checked" 可以简写为checked

6.复选框（复选按钮）

语法：<input type="checkbox" checked disabled/>

注：checked属性主要应用在单选和复选按钮上

disabled属性用来设置input控件的禁用状态

7.下拉列表

语法： <select>
　　　　<option>a</option>
　　　　<option selected>b</option>
　　　　...
　　　</select>

注：selected用来设置下拉列表的默认选中项

8.文本域

语法：<textarea cols="字符宽度" rows="行数"></textarea>

扩展：禁止用户通过拖拽改变文本域的大小

textarea{resize:none;}

9.普通按钮

语法：<input type="button" value="***"/>

注：普通按钮不具备提交的功能，通常结合js使用

普通按钮默认value值为空，可以重新设置value属性

10.提示信息：

a）可以将单选或复选按钮和文字进行关联，点击文字也可选中单选，复选按钮

eg: <input type="radio" name="sex" id="boy"/><label for="boy">男</label>

b）将提示信息放置在label标签中可以设置我们想要的样式

c) label标签是内联元素

11.表单字段集及表单字段集标题

语法：<fieldset>
　　　　　　<legend>用户注册</legend>
　　　　　　...
　　　</fieldset>

作用：将form中的表单控件进行分组，并添加一个标题

12.上传文件

语法： <input type="file"/>

13.隐藏字段

语法：<input type="hidden"/>

注: 主要供后端修改数据时使用

14.图像域

语法：<input type="image" width="***" height="***" src="图片路径"/>

作用：使用图像作为提交按钮，具备提交功能

form标签上的相关属性解释：

1.method 用来设置数据传送方式，一般为get和post方式

注：get和post的区别

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

2.action 用来设置数据要发送到的位置，一般为后端文件

eg： <form method="get/post" action="http://www.qfedu.com/index.php"></form>

七、div

作用：在布局网页时用来划分板块

语法： <div></div>

八、span

语法：

<span>标签被用来组合文档中的行内元素。在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

在IE6下，span元素浮动时一定要把span元素放在a标签之前，不然，会出现浏览器兼容问题，IE6下，浮动过后的span元素会向下错位一行。

提示和注释：

提示：请使用<span>来组合行内元素，以便通过样式来格式化它们。

注：span没有固定的表现格式，只有在对它应用样式时，才会产生视觉上的差异

span可以实现将文本的某一部分独立出来

九、iframe框架和<frameset> 标签

1.iframe框架

语法： <iframe src="3.表单.html" width="500" frameborder="0" scrolling="auto"></iframe>

注：width：iframe框架的宽度

　height：iframe框架的高度

frameborder 设置iframe框架的边框

scrolling = "no" 隐藏（去掉）iframe的滚动条

2.frameset 定义一个框架集，包含多个框架，每个框架都有独立的文档。

2.1 格式

2.2 子项说明

<frame src="a.html" /> ：子框架

<noframes></noframes>：浏览器不支持此框架的时，显示的内容。

2.3 属性

frameset 属性：

　　rows ：表示子框架按行的样式布局（）。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的；

　　cols ：表示子框架按列的样式布局()。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的；

　　noresize="noresize" ：表示不调整子框架的范围。

frame 属性：

　　src ：指向一个资源(如页面、图片等)的URI；

　　name ：指定框架的名称，以便进行框架间的操作。

十、html注释

语法：

从零开始学习前端开发 — 1、HTML基础的更多相关文章

从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...
从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

随机推荐

Linux(CentOS6.5)下创建新用户和组，并制定用户和组ID
相关命令: groupadd -g 888 comexgroup useradd comex -d /comexHome -g comexgroup -u 888 cp /etc/skel/.* /c ...
Java自己动手写连接池一
自己动手写连接池,废话不多说,直接上代码,读取配置文件 package com.kama.cn; import java.io.IOException;import java.io.InputStre ...
XML的解析（DOM以及SAX方式）
感谢http://blog.csdn.net/redarmy_chen/article/details/12951649(关于SAX解析)以及http://blog.csdn.net/zhangerq ...
教育改革——国家认证 “网红” 编程语言 Python
特大消息!!! 不止是上海计算机二级考试 ,全国计算机考试等级考试也有要求如果你正打算考计算机等级,那你需要学习以下知识要求学习的知识太多了,我就不一一在这里展示了! 一.考试改革的目标据悉 ...
Nginx集群之.Net打造WebApp(支持IOS和安卓)
目录 1 大概思路... 1 2 Nginx集群之.Net打造WebApp(支持IOS和安卓) 1 3 安卓模拟器... 1 4 MUI框架... 3 ...
【图文】如何在centos上安装tomcat
先到tomcat官网下载安装包(随便下载你想要的版本) 假设你现在使用的是windows系统那么就把你下载来的压缩包解压,放到一个目录中在你本地的windows系统中安装个xshell和xftp ...
【转】NO.2、Appium之IOS第一个demo
接第一篇:Appium之iOS环境搭建 http://blog.csdn.net/clean_water/article/details/52946191 这个实例继承了unittest,重写了它的s ...
mac安装mysql的两种方法（含配置）
1.使用安装包安装mysql 双击打开安装文件双击pkg文件安装一路向下,记得保存最后弹出框中的密码(它是你mysql root账号的密码) 正常情况下,安装成功. 此时只是安装成功,但还需要额外 ...
duilib基本框架
最近我一个同学在项目中使用到了duilib框架,但是之前并没有接触过,他与我讨论这方面的内容,看着官方给出的精美的例子,我对这个库有了很大的兴趣,我自己也是初学这个东东,我在网上花了不少时间来找相关的 ...
C语言中处理结构体的原理
汇编中有几种寻址方式,分别是直接寻址:(ds:[idata]).寄存器间接寻址(ds:[bx]).寄存器相对寻址(ds:[bx + idata].ds:[bx + si])基址变址寻址(ds:[bx ...

从零开始学习前端开发 — 1、HTML基础

从零开始学习前端开发 — 1、HTML基础的更多相关文章

随机推荐

热门专题