首页 / 知识

HTML基础怎么做出属于自己的完美网页

2023-04-11 13:50:00

HTML基础怎么做出属于自己的完美网页
　　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>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
 
　　文档结构如下：
 
　　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>:
 
　　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，讲究看吧

网页浏览器用户标记语言解释缩写

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢