设为首页 收藏本站
查看: 1017|回复: 0

[经验分享] day14 HTML CSS

[复制链接]

尚未签到

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

HTML文档
DSC0000.png


Doctype
  Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
  
有和无的区别
  BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
  
CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
  
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
  有,用什么?
  Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

Meta
  提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
  页面编码(告诉浏览器是什么编码)
  < meta http-equiv=“content-type” content=“text/html;”>
  刷新和跳转
  

<!DOCTYPE html>  
<html lang=&quot;en&quot;>
  
<head>
  <meta charset=&quot;UTF-8&quot;>
  <meta http-equiv=&quot;Refresh&quot; content=&quot;2&quot;>
  <meta http-equiv=&quot;Refresh&quot;content=&quot;2; Url=http://www.baidu.com&quot; />
  <title>star</title>
  
</head>
  
<body>
  
aaa
  
</body>
  
</html>
  

  关键词
  
< meta name=&quot;keywords&quot; content=&quot;星际2,星际老男孩,专访,F91,小色,JOY&quot; >
  描述
  
例如:cnblogs

Title
  网页头部信息

Link
  

1.css
  
< link>  

  
2.icon

  
< link>  

Style
  

在页面中写样式  

  
例如:
  
< style type=&quot;text/css&quot; >
  
.bb{
  background-color: red;
  }
  
< /style>
  

Script
  

1.引进文件  
< script type=&quot;text/javascript&quot; src=&quot;http://www.googletagservices.com/tag/js/gpt.js&quot;> </script >
  

  
2.写js代码
  
< script type=&quot;text/javascript&quot; > ... </script >
  

常用标签
  标签一般分为两种:块级标签 和 行内标签


  • 行内标签:a、span、select 等
  • 块级标签:div、h1、p 等
各种符号
DSC0001.png

  
常用:
  
DSC0002.png
  参考:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p和br


  • p表示段落,默认段落之间是有间隔的!
  • br 是换行
a标签
  

< a href=&quot;http://www.autohome.com.cn&quot;> </a>  


  • target属性,_black表示在新的页面打开
  

<a href=&quot;http://www.baidu.com&quot; target=&quot;_blank&quot;>百度</a>  



  

<!--寻找页面中id=i1的标签,将其标签放置在页面顶部-->  
<a href=&quot;#i1&quot;>第一章</a>
  
<a href=&quot;#i2&quot;>第二章</a>
  
<a href=&quot;#i3&quot;>第三章</a>

  
<div>
  
<div>
  
<div>  

H标签
  

<h1>a</h1>  
<h2>a</h2>
  
<h3>a</h3>
  
<h4>a</h4>
  
<h5>a</h5>
  
<h6>a</h6>
  

select标签
  

<p>城市(下拉框):
  <select multiple>  <option>上海</option>
  <option>北京</option>
  <option>北京</option>
  <option>深圳</option>
  </select>
  <select>
  <option>上海</option>
  <option>北京</option>
  <option>广州</option>
  <option>深圳</option>
  </select>
  <select>
  <optgroup label=&quot;AAA&quot;>
  <option>上海</option>
  <option>北京</option>
  </optgroup>
  <optgroup label=&quot;BBB&quot;>
  <option>广州</option>
  <option>深圳</option>
  </optgroup>
  </select>
  
</p>
  

input标签:checkbox
  

<p>爱好(复选框):  <br />羽毛球<input type=&quot;checkbox&quot; />
  <br />网球<input type=&quot;checkbox&quot;  />
  <br />篮球<input type=&quot;checkbox&quot;  />
  <br />足球<input type=&quot;checkbox&quot;  />
  <br />棒球<input type=&quot;checkbox&quot;  />
  

  
</p>
  

input标签:redio
  

<p>性别(单选框):<br />男<input type=&quot;radio&quot; name=&quot;gender&quot; /> <br />女<input type=&quot;radio&quot; name=&quot;gender&quot; /></p>  

input标签:password
  

<p>密码:<input type=&quot;password&quot; /></p>  

input标签:button
  

<input type=&quot;button&quot; value=&quot;提交(button)&quot; />  

input标签:file
  

<p>文件:<input type=&quot;file&quot; /></p>  

  提交文件时: enctype='multipart/form-data' method='POST'

input标签:textarea
  

<p>备注:<textarea>111</textarea></p>  

运维网声明 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-386491-1-1.html 上篇帖子: Windows Server 2012 虚拟化实战:SCVMM的安装和部署 下篇帖子: HyperSnap(屏幕抓图工具) 8.11.03 官方简体中文特别版
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

扫描微信二维码查看详情

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


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


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


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



合作伙伴: 青云cloud

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