前端02.html基础

简介:

一、什么是html?

超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则。

浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)。

静态网页文件扩展名:.html 或 .htm。



二、html结构。

1.html语法。

1.标签的语法:

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

2.doctype:

“<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档。”

#声明客户端浏览器解析html文档的标准

“<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。”

简单来说html标签用来声明一个html文档的开头和结尾。


<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

document.compatMode:

BackCompat:浏览器自己的模式,浏览器使用自己的浏览器自己的模式解析渲染页面。

CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat。


3.head:

<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

head标签中最长出现的就是meta标签。

<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。

<meta>提供的信息是用户不可见的

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

#<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">#


http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

#服务器的响应头部,可以通过http-equiv定义。

< meta http-equiv=“Refresh” content="2;URL=https://www.google.com" > //(注意后面的引号,分别在秒数的前面和网址的后面)

 

<meta http-equiv="content-Type" charset=UTF8">

 

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


<link rel="icon" href="http://www.jd.com/favicon.ico"> #设置网站图标。




4.title:

<title></title>定义网页标题,在浏览器标题栏显示。 


5.body :

<body></body>之间的文本是可见的网页主体内容

body标签内部常见的标签:

5.1<hn>: 用于定义标题。n的取值范围是1~6; 从大到小. 用来表示标题.

5.2<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.(主要效果就是换行)

5.3<b> <strong>: 加粗标签.

5.4<strike>: 为文字加上一条中线.

5.5<em>: 文字变成斜体.

5.6<sup>和<sub>: 上角标(在一个字符的右上角显示一个字符) 和 下角表(在一个字符的右下角显示一个字符).

5.7<br>:换行.

5.8<hr>:水平线

特殊字符:

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


5.9<div>和<span>

<div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现. 

<span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别

所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。


5.10<img> 图形标签。


src: 要显示图片的路径.

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

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

width: 图片的宽

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


5.11 <a> </a>超链接标签(锚标签)。

什么是超级链接?

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上。

的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。


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

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

    绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)

    相对 URL - 指当前站点中确切的路径(href="index.htm")

    锚 URL - 指向页面中的锚(href="#top")


5.12 列表标签:


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

<ol>: 有序列表

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

<dl>  定义列表

         <dt> 列表标题

         <dd> 列表项


5.13 <table>表格标签:

表格概念

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

表格的基本结构:

<table>

         <tr>

                <td>标题</td>

                <td>标题</td>

         </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:  单元格横跨多少列(即合并单元格)


5.14 <form>关于表单标签:

功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

from中包含的属性:

表单属性

     action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web

     method: 表单的提交方式 post/get默认取值就是get


基本概念:

HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理:

访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 

服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。


<from>表单标签中还包含了许多子标签。

input系列:

(1) 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

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

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

            

            上传文件注意两点:

请求方式必须是post

enctype="multipart/form-data"

 (2)表单属性

 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>


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

        <label for=“username”>用户名</label>

        <input type=“text” name=“username” id=“username” size=“20” />

</form>


<fieldset>标签

<fieldset>

    <legend>登录吧</legend>

    <input type="text">

</fieldset>





      本文转自苏浩智 51CTO博客,原文链接:http://blog.51cto.com/suhaozhi/1929584,如需转载请自行联系原作者



相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
26天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
32 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发 JavaScript 开发者
前端的HTML使用
前端的HTML使用
15 3
|
1月前
|
前端开发
web前端-HTML-div语法
web前端-HTML-div语法
|
2月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
62 1
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
前端秘法基础式(HTML)(第二卷)
前端秘法基础式(HTML)(第二卷)
|
2月前
|
前端开发
前端秘法基础式(HTML)(第一卷)
前端秘法基础式(HTML)(第一卷)