设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 1269|回复: 0

[经验分享] 谈谈html

[复制链接]
娇w兴

尚未签到
发表于 2017-6-22 09:22:56 | 显示全部楼层 |阅读模式
HTML
　　HTML解释：
　　HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
　　浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！



#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
　　网页的组成：
　　一个网页一般由两部分组成即：


  • HTML（Hypertext Markup Language）
  • 和CSS（Cascade Style Sheets）。
　　HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
　　<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>

HTML文档
　　实例如下代码：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
　　1、DOCTYPE
　　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将触发严格模式。
  • 一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表 。
DSC0000.png


head部分
　　1、Meta(metadata information)
　　 提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
　　1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8
　　2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--<meta http-equiv="Refresh" CONTENT="5"> -->
<meta http-equiv="Refresh" CONTENT="5;Url=http://www.baidu.com/">
<title></title>
</head>
<body>
<h1>haha</h1>
</body>
</html>
　　3、关键字
　　关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

<meta name="keywords" content="博客,Mr、心弦,帅哥,罗天帅">
　　4、描述
　　例如cnblog里的就是一个描述：



<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
　　5、X-UA-Compatible
　　X-UA-Compatible  这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
　　<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
　　2、title
　　网页头部信息，如下图所示：
DSC0001.png




<title>博客园 - 开发者的网上家园</title>
　　3、Link
　　网页头部的图标

<link rel="shortcut icon" href="favicon.ico">  
　　效果图如下：
　　<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" >
DSC0002.png

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



<link rel="stylesheet" href="css/css_model.css">
　　4、Style
　　1、在当前文件中写Css样式
　　2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
　　5、Script
　　1、在当前文件中写JS
　　2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

body部分
　　基础知识
　　1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：
　　块级别标签&内联标签：



<body>
<h1 style="background-color: red">haha</h1>
<a style="background-color: aqua">NBA</a>
</body>
DSC0003.png

　　块级标签占一整行
　　内联会根据你的内容多少来占多少空间
　　2、特殊符号特殊处理
　　举例来说<h1>是标题标签，如果我想输出<h1>这个字符串，而不是想获取<h1>的样式怎么办呢？



<body>
<h1 style="background-color: red">haha</h1>
<a style="background-color: aqua">NBA</a>
&lt;h1&gt;
</body>
　　"<",">"用特殊字符"&lt;","&gt;"来表示便可输出<h1>
DSC0004.png

　　正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示，所以特殊的标签需要特殊处理
　　所以特殊符号有自己的定义更多请看连接：更多
　　常用标签：
　　
DSC0005.png




   <!-- 常用标签-->
<p>段落</p>
<p>段落纷纷共和国韩国海军和机会积极</p>
<p>sdddsddddsddd<br>换行ddddddddddddddddddddddddddddd</p>
<a href="http://www.baidu.com">超链接</a><br>
<a target="_blank" href="http://www.baidu.com">超链接：跳转新页面</a>
　　1、<p></p>标签和<br/>标签
　　<p></p>标签：段落标签，每一对p标签为一段,代码如下



   <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
　　显示效果如下：
DSC0006.png

　　<br/>标签：换行标签；有一个<br/>为一个换行，看下面的代码:



    <p>帅哥帅帅哥帅帅哥帅<br/>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
　　显示效果如下，我加了一个<br/>标签之后段落就被换行了：
DSC0007.png

　　2、<a></a>标签
　　<a></a>标签用来跳转和锚
　　<a>标签之：跳转
　　默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码



<a href="http://www.baidu.com">超链接</a>

　　点击"超链接"会在本页面跳转到baidu.com。
　　如果让他用一个新的标签页中打开连接地址代码如下：



a target="_blank" href="http://www.baidu.com">超链接：跳转新页面</a>
　　<a>标签之：锚
　　锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置



<a href="#a2">
书签1
</a>
<!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height:700px;">
书签2内容
</div>
<div id="a2" style="height:700px;">
书签1内容
</div>
　　上面的代码中，如果点击了书签之后，那么就会跳转到id=a2的书签的位置！ (id类似标签身份证号意思，是识别标签唯一性的号码)
　　3、H标签
　　即标题标签,代码如下



<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
　　显示效果如下：
DSC0008.png

　　4、Select标签
　　第一种select标签



<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option>
<!--这里默认是广州因为selected="selected" 这里设置了默认的！-->
</select>
　　显示效果如下图：
DSC0009.png

　　第二种select标签



<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
　　size="2"表示显示两个
　　显示效果如下图：
DSC00010.png

　　第三种select标签,可以进行多选



<select multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
　　第4中select标签，可以进行分组



<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
　　效果图如下：
DSC00011.png

　　5、input系列标签
　　 input:checkbox标签-复选框



<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked，为默认选择"-->
　　效果如下图：
DSC00012.png

　　input:radio标签-单选框



<!--第一中情况不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
　　效果图如下：
DSC00013.png

　　input:text & password 输入框



<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框（输入的内容是保密的）-->
<input type="password"/>
　　效果图如下：
DSC00014.png

　　input:button & submit 提交按钮



<input type="button" value="提交"/>
<input type="submit" value="提交"/>
　　效果图如下：
DSC00015.png

　　file标签-用来提交文件时使用



<input type="file"/>
　　效果图如下:
DSC00016.png

　　 6、多行文本框



<textarea style="height: 100px;width: 100px;"></textarea>
　　效果图如下：
DSC00017.png

　　7、form表单



<form>
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/></p>
<input type="submit" value="提交"/>
<input type="button" value="按钮"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
　　效果如下
DSC00018.png

　　from表单遵守着key-vlaue的形式提交给后台/目标页面



<form action="http://127.0.0.1:8000/login/" method="get">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<p>
用户名:<input type="text" name="username"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
密码:<input type="password" name="password"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
部门:<select name="department">
<option value="1">CTO</option>
<option value="2">DBA</option>
<!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
</select>
性别:<input type="radio" name="gender" value="1"/>男<br>
<input type="radio" name="gender" value="2"/>女<br>
<input type="radio" name="gender" value="3"/>保密<br>
<!-- 加入我选保密,后台是接受到的数据会是 {'gender':['3']}-->
<textarea name="mult"></textarea>
</p>
<input type="submit" value="提交"/>
</form>

get方式，后台的例如,get.request()会接受到数据
　　小玩意:



<form action="https://www.sogou.com/web?">
<p>
关键字: <input type="text" name="query" />
<input type="submit" value="搜索"/></p>
　　 8、label标签
　　有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：
　　代码如下：



<div>
<h1>Label标签</h1>
姓名:<input type="text"/>
婚否:<input type="checkbox"/>
</div>
　　 DSC00019.png
　　使用label标签，代码如下：



<div>
<label for="name_1">
姓名:
<input id="name_1" type="text"/>
</label>
<!-- for的值和它对应输入的input的id是一样的-->
<label for="name_2">
婚否:<input id="name_2" type="checkbox"/>
</label>
</div>
　　显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：
DSC00020.png

　　9、列表 ul/ol/dl
　　 ul列表在前面自动加“点”，代码如下：



<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
　　效果如下：
DSC00021.png

　　ol列表在前面自动加“数字”，代码如下：



<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
　　效果如下：
DSC00022.png

　　dl列表自动分组，代码如下：



<dl>
<dt>河北省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>
　　效果如下图：
DSC00023.png

　　10、表格
　　



<table border="1">
<!--border这里是加上边框-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
　　效果如下：
DSC00024.png

　　合并单元格



<table border="1">
<!--border这里是加上边框-->
<tr>
<td colspan="3">1</td>
<!--这里colspan，就告诉html解析的时候占3个格-->
</tr>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
　　效果如下图：
DSC00025.png

　　以上的表格标签其实还不是很标准，正常标准的标签如下：



<table border="1">
<thead>
<!--表头-->
<tr>
<th>表1</th>
<th>表2</th>
<th>表3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
　　效果如下图：
DSC00026.png

　　11、fieldset标签
　　代码如下：



<fieldset>
<legend>登录</legend>
欢迎到登陆页面
<p>
USER:<input type="text" />
</p>
<p>
PASSWORD:<input type="password" />
</p>
</fieldset>
　　效果如下：
　　 DSC00027.png
　　
　　


更多参自:http://www.cnblogs.com/luotianshuai





作者：风早
出处：http://www.cnblogs.com/fengzaoye/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-386726-1-1.html 上篇帖子： (转) Learning from Imbalanced Classes 下篇帖子： 转载：scikit-learn学习之SVM算法
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表