首页 > > 网页制作 > css >

前端--1、HTML基础

2018-06-24 02:05:14来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

<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>

网页标签名

给标签链接一些图片等。

<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=“text” name=“username” id=“username” size=“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/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：一分钟教你如何实现唯美的文字描边

下一篇：一道前端学习题

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签