前端编程—html基础精选

10/14 13:46
阅读数 11

今天分享下如何制作出属于自己的网页:基础版,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

  HTML解释:

 

  HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的规则(W3C),大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

 

  浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

 

  网页的组成:

 

  一个网页一般由两部分组成即:

 

  HTML(Hypertext Markup Language)

 

  和CSS(Cascade Style Sheets)

 

  HTML负责描述网页的结构和内容(如标题,导航栏等) CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。

 

  <head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息

 

  <body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意

 

  <html></html>

 Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

 

  HTML语言需要一个标准,当我们在第一行指定了<!DOCTYPE html>的时候,当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。

 

  为什么要使用<!DOCTYPE html>这个去告诉浏览器呢?

 

  DOCTYPE模式:

 

  我们先了解一下DOCTYPE的模式

 

  BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

 

  CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

 

  问题产生:

 

  当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

 

  为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

 

  然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。

 

  因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。

 

  解决方案:

 

  允许网站开发者能够选择他们所熟知的模式。

 

  依然使用旧式规则显示陈旧的网站。

 

  换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

 

  选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格

 

  产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。

 

  相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。

 

  任何新的或未知的DOCTYPE将触发严格模式。

 

  1、Meta(metadata information)

 

  提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

 

  1>定义编码格式

 

  2>刷新和跳转页面

 

  3>关键字

 

  关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到咱们的网站。

 

  4>描述

 

  例如博客园的描述如下:

 

  5>title

 

  设置标签为张岩林

 

  6>标签图标Link

 

  7>导入CSS类似python中导入模块类似

 

  8>、Style

 

  1、在当前文件中写Css样式

 

  2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

 

  9>、Script

 

  1、在当前文件中写JS

 

  2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

 

  body里面分为两类标签:块级标签和内联标签。

 

  1、块级标签:<p><h1><table><ol><ul><form><div>

 

  2、内联标签:<a><input><img><sub><sup><textarea

 

  1、基本标签

 

  <hn>: n的取值范围是1——6; 从大到小。 用来表示标题。

 

  <p>: 段落标签。 包裹的内容被换行。并且也上下内容之间有一行空白。

 

  <b> <strong>: 加粗标签。

 

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

 

  <em>: 文字变成斜体。

 

  <sup>和<sub>: 上角标 和 下角表。

 

  <br>:换行。

 

  <hr>:水平线

 

  <div><span>

 

  废话不多说,直接撸码分析

 

  效果如下:

 

  2、图形标签<img>

 

  src: 要显示图片的路径。

 

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

 

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

 

  width: 图片的宽

 

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

 

  3、超链接标签(锚标签)<a>:http://www.qlyl1688.com/

 

  href:要连接的资源路径 格式如下: href=""

 

  target: _blank : 在新的窗口打开超链接。 框架名称: 在指定框架中打开连接内容。

 

  name: 定义一个页面的书签。

 

  用于跳转 href : #书签名称。

 

  还有一种本页标签跳转,通过定义ID来进行查找到内容

 

  4、列表标签:

 

  <ul>: 无序列表

 

  <ol>:有序列表

 

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

 

  <dl> 定义列表

 

  <dt> 列表标题

 

  <dd> 列表项

 

  效果如下:

 

  5、表格标签: <table>:

 

  border: 表格边框。

 

  cellpadding: 内边距

 

  cellspacing: 外边距。

 

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

 

  <tr>: table row

 

  <th>: table head cell

 

  <td>: table data cell

 

  rowspan: 单元格竖跨多少行

 

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

 

  <th>: table header <tbody>(不常用): 为表格进行分区。

 

  效果如下:

 

  表格中还有合并单元格:

 

  6、表单标签(django)<form>:

 

  表单用于向服务器传输数据。

 

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

 

  表单还可以包含textarea、select、fieldset和 label 元素。

 

  1>.表单属性

 

  HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。

 

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

 

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

 

  get: 1.提交的键值对。放在地址栏中url后面。 2.安全性相对较差。 3.对提交内容的长度有限制。

 

  post:1.提交的键值对 不在地址栏。 2.安全性相对较高。 3.对提交内容的长度理论上无限制。

 

  get/post是常见的两种请求方式。

 

  2>.表单元素

 

  <input>     type:     text 文本输入框

 

  password 密码输入框

 

  radio 单选框

 

  checkbox 多选框

 

  submit 提交按钮

 

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

 

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

 

  效果有点low,讲究看吧

今天的文章就分享到这啦,内容转自divcss5平台,下篇文章再见!
 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部