IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 前端 -> 正文阅读

[Html-Css]前端

前端 web服务
处于应用层的http协议负责的数据传输与解析。
位于socket上层,用socket传输http数据时需要在消息开头处声明是http协议/相应http版本 状态码 状态码含义 \r\n\r\n 真正的字符串内容。
HTML是什么
Hypertext Markup Language,是一种标记语言,来标记要显示的网页中的各个部分。一套浏览器认识的规则。
浏览器会按顺序渲染网页代码文件,根据标记符解释和显示内容。不同浏览器的标签解释可能有差异。
静态网页文件扩展名: .html .htm .js ……
使用标记标签来设置网页的展示 如
  html代码文件的结构
<!DOCTYPE html> #让浏览器知道用哪种HTML来解析它。 #开头标记,结束时有对应标记。告诉浏览器自身是一个HTML文档。 ?<head> #头部定义 ??<meta charset="UTF-8"/> ??<title>网页的标题</title> ?</head> ?<body> #网页主题内容 ?</body> #结尾标记
html标签格式 关键词是被尖括号<> 包住的。 通常成对出现,如  开始标签,  结束标签。有些功能简单的标签一个即可,称为自闭和标签, 不区分大小写 可以有若干个属性,也可不加属性。 标签内可嵌套标签,但不能交叉嵌套。 标签的语法:
<标签名 属性1= "属性值1" 属性2= "属性值2" ……> 内容部分 </标签名>
<标签名 属性= "属性值1" 属性2= "属性值2" …… />
常用标签 <!DOCTYPE>
写与文档最前面,<html>标签之前。告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用:声明文档的解析类型。避免浏览器的怪异模式。
解析类型 backcompat 怪异模式,浏览器用自己的方式解析渲染 CSS1compat 标准模式。浏览器用w3c标准解析渲染
若没写,默认是backcompat
<head> <meta>
提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词。
位于文档头部,不包含任何内容。
提供的信息对用户不可见
meta标签的属性
http-equiv属性 相当于http文件头,想浏览器传回一些信息,以帮助正确的显示网页内容,与之对应的属性值为content。例子:

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

name属性 描述网页,与之对应的属性值为content(为便于搜索引擎查找和分类信息)

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
 
<meta name="description" content="培训机构是由一群很人创建的">

<title>
网页标签名
<link>
给标签链接一些图片等。
<script>
???
<body>
块级元素与行内元素的区别 所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
块级标签 <hn> n为1~6,表示内容中标题大小。
段落标签,换行后与上下间有空格
换行 水平线 内联标签 文字加粗 <strike> 在文字上加一条中线 下角标、上角标 特殊字符

&lt; &gt;&quot;&copy;&reg;

<div>
块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>
内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
<img>
图片标签

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<a> </a>
超链接标签
从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上 的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
注:URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型:

  绝对 URL - 指向另一个站点(比如 href="http://www.jd.com相对 URL - 指当前站点中确切的路径(href="index.htm"锚 URL - 指向页面中的锚(href="#top"

列表标签

<ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

<table>
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
基本结构

<table>
    <tr>
        <th>标题<th>  #第一列,th会加粗字体
        <th>标题<th> 
    </tr>
    
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>


<tr>: table row

<th>: table head cell

<td>: table data cell


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.(最好通过css来设置长宽)

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列(即合并单元格)

表单标签<from>
用于向服务器传输数据,从而实现用户与web服务器的交互
能包含input系列标签,如文本字段、复选框、单选框、提交按钮等。
还可以包含textarea、select、fieldset和label等标签。
表单属性 action : 表单提交到哪个地址,程序要有相应的接收表单数据与处理机制, method: 表单的提交方式 post/get默认取值就是get 表单元素
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息。
表单工作原理: 访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息
<input>标签
类型

type:   text 文本输入框

        password 密码输入框

        radio 单选框

        checkbox 多选框  

        submit 提交按钮            

        button 按钮(需要配合js使用.) button和submit的区别?

        file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
            
            上传文件注意两点:

                     1 请求方式必须是post
                     2 enctype="multipart/form-data"

属性

 name:    表单提交项的键.

           注意和id属性的区别:name属性是和服务器通信时使用的名称;
           而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

                type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
                type="text", "password", "hidden" - 定义输入字段的初始值
                 
                type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

select标签

 <select> 下拉选标签属性


          name:表单提交项的键.

          size:选项个数

          multiple:multiple 
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性:

                       value:表单提交项的值.   
                       selected: selected下拉选默认被选中

<textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>
</form>

<label>标签
定义:<label> 标签为 input 元素定义标注(标记)。
说明: 1 label 元素不会向用户呈现任何特殊效果。 2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form method="post" action="">

        <label for=“username”>用户名</label>
        <input type=“textname=“usernameid=“usernamesize=“20” />
</form>

<fieldset>标签
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。 
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。 <legend> 标签为 fieldset 元素定义标题。
包含的所有全局属性 disabled HTML5 如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外, 例如, 禁止编辑. 该元素和它的子元素不会接受任何浏览器事件, 比如点击或者 focus 事件, 一般来说浏览器会将这样的元素展示位灰色. form HTML5 规定fieldset所属的form表单. 这个属性的值与其所属的form的ID相同. 默认值是最近的那个form. name HTML5 控制元素分组的名称

<fieldset>
    <legend>登录吧</legend>
    输入登录信息,布拉布拉……
    <input type="text">
</fieldset>

前端学习站点
推荐:https://developer.mozilla.org/en-US/

上一篇文章      下一篇文章      查看所有文章
加:2017-12-09 23:29:53  更:2017-12-09 23:30:01 
 
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年11日历
2018-11-19 21:19:44
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库