Hom's Blog


HTML基础篇

新手可到CodeCademy进行简单的学习, 中文版地址.
更详细的可到中文版的w3school进行学习!

HTML全称超文本标签语言,使用markup语言进行编写. 新一代的为HTML5,具有更多特性.

基础要素

基础知识

  • <**> - </**> 标签(开始标签和结束标签),定义一系列内容,标签和内容组成一个html的元素。<> </>两者间为内容,<>内可加属性定义, 属性和标签名间加空格,内容bgcolor="red"这样,定义值为引号内,可用单引号或双引号。注意元素内的内容的多个连续空格会合并成一个,也会忽略你的换行等书写格式(此时需要<br>)。各种tag说明请参见w3c-tags
  • <** /> self-closing标签,无结束标签。例如<br /> 不写/也行。
  • <! *****>: 注释内容,新版用<!--****-->
  • 要表达大于小于,请使用&gt &lt

主要要素:

  • <!DOCTYPE html> : 标记为html语言,一般在第一行.
  • <html> </html> : 主体部分,包含了head,body等. 一般如<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> ... </html>
  • <head> </head> : 头信息,不被显示,可以放一些参数样式和js脚本等。主要是方便搜索引擎。
  • <body> </body> : 主体, 显示的内容.
  • <footer> </footer>: 页脚,底注.

head元素一般包括title,style,script,meta等

  • <title> </title> : 网页标题。一般写在head内。基本要素之一.
  • <style> </style>: 定义样式,和css文件一样写法。参看css文件。
  • <link />: 定义载入连接文件,例如css:<link type="text/css" rel="stylesheet" href="stylesheet.css" />
  • <script> </script>: 定义脚本,可外链或写在页面上. 加载外链如<script type="text/javascript" src="/jsmol/JSmol.min.js"></script>, type指明类型,当为JS时可以忽略.
  • <meta />,用来储存一些不显示但可以被分析利用的数据.如<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Hom" />

页面基础元素:

  • <hr>: 一条大横分隔线,无结束符。
  • <div> </div>:分块,容器一种.块级元素.
  • <span> </span>:将整体内容分各部分处理,不同span只占在一个块内,例如只占一行.一般用来控制不同样式.普通元素.
  • <p> </p> : 段落元素, 其实就是上下空一行隔开内容.常用文字元素.
  • <h1><h6>: 标题元素,从1到6减小字体大小,加粗,上下留空。属性:align=”center”
  • <img src=url/>: 图片,无结束符。使用src属性指定图片,可以是本地或者超链接。
  • <a> </a>: 锚标签,用来连接到别的地方。<a>显示内容(可以是图片)</a>.
    • href属性指定超链接,邮件可用"mailto:abc@163.com?subject=Hello%20again"这样子指定,注意?分隔内容。
    • target="_blank" 属性将以新链接打开,target定义从什么地方打开连接地址。
    • name属性用来定义定义锚的名字,用"#name"进行业内跳转,也可以url#name来去某节跳转。
    • text-decoration:none/underline可以取消超链接的下划线
  • <li></li>: 在有序和无序列表中的每一项内容.
  • <ol> </ol>: 有序列表;
  • <ul></ul>: 无序列表,默认起始一个大点。每个项为一行,用<li></li>表示该项。li的前符号可用list-style-type定义
  • <table> </table>:
    • <thead> </thead><tbody> </tbody>:头和主体(一般头是第一行)
    • <tr></tr><tc></tc>
    • <td> </td>一般数据格,
    • <th></th>thead内用tr创建行后用来加首行的格内容;
    • 注意tbody用align属性可以全部整体align;colspan="3", rowspan=3属性进行单元格合并(适于th,td);style很多,如padding; border(一个框),border-left/right/bottom/top:1px solid/dashed/dotted black/#123456; table有border-collapse:collapse. 范例:<table border="1px"><thead><tr><th>name</th><th>age</th></tr></thead><tbody style="align:center"><tr><td>hom</td><td>30</td></tr></tbody></table>

高级元素:

  • <button type="button" onclick="alert('Welcome!')">Text shown</button>: 按钮;
  • <input type="text" name="fname" /> : 输入框;
  • <form> </form> : 输入空键;
  • <label for="male">Male</label> <input type="radio" name="sex" id="male" />: 单选
  • <label><input name="Fruit" type="checkbox" value="" />苹果 </label>: 复选
  • <video src="/i/movie.ogg" controls="controls">Hi</video> : 视频元素
  • <select><option value ="volvo">Volvo</option><option value ="saab">Saab</option></select>: 下拉菜单
	var chkObjs = document.getElementsByName("SURFACE_METHOD");
    for(var i=0;i<chkObjs.length;i++){
        if(chkObjs[i].checked){
            stype=chkObjs[i].value;
            break;
        }
    }

格式控制:

简单HTML控制

  • <br>: 换行
  • &nbsp: 强制空格; &amp 相当于&; &quot双引号. 更多特殊字符参见.
  • <pre>: 预格式化,就是按输入的内容显示,包括输入的多个空格、换行这些元素。一般在css中pre code这样去专门定义,更优先.
  • <b> : 内容被加粗
  • <strong>: 内容被强调,显示起来和bold一样,可以修改强调的格式。
  • <i>:italic,斜体
  • <em>: 强调,显示也是斜体
  • <del>: 标记被删除(就是文字中间一横)
  • <ins>: 标记为插入(就是下划线)
  • <big>/<small>: 变大变小
  • <sup>/<sub>:上下标
  • <code>/<kbd>/<tt>/<samp>/<var>: 一般用来显示计算机输出结果。。
  • <address>: 地址的格式,一般为斜体。
  • <abbr title="United Nations">UN</abbr>: 缩写,鼠标移到UN上时显示缩写
  • <acronym title="World Wide Web">WWW</acronym>: 首字母缩写, 和abbr差不多。
  • <bdo>: 文字从右到左。。。
  • <q><blockquote>: 小块引用(只加引号)和大块引用(新行,起始空几格)

characters style

属性:

  • id: 指明特定ID,用于CSS和JS操作.
  • class: 指明属于某类型,用于CSS渲染.
  • title: 效果像提示信息解释,如<abbr>.
  • align: 水平对齐,top,bottom,center
  • valign: 垂直对齐,top,bottom,center
  • style: 放在标签内,格式为style="name:value; name2:value2" name例如:
    • color(green,更多, 采用16进制6个数字,可搜hex color picker来辨认.
    • font-size(10px 无空格,或者用1em,em表示默认字体大小倍数,和硬件无关)
    • font-weight(bold)
    • font-family(Times,Arial,更多,注意大小写敏感. css一般支持:serif, sans-serif, cursive草书; 可用,来分隔多个可能字体,因为不一定都支持,会按顺序选择字体,将serif等放最后.
    • background-color, white/black.., 底色.
    • text-align(center,left,right),文字对齐方法. justify分散对齐
    • text-decoration:none/underline. 针对超链接a(修饰为下划线);
    • width,height: 宽和长.
    • display: block 默认竖排放置block;inline-block:横排放置block;inline:以最小尺寸横放,若为空会叠放一起,适合于<p><h1>等;none:不显示。
    • margin/border/padding:见下方图说明.margin控制内容边界和block边界的间距(也可理解为不同元素的间距),padding控制内容到边界间距.
    • border: 1px dashed black同时设三者格式,其实对应子属性border-width,border-style, border-color
    • border-radius表示块的四角的弯曲度(5px),100%时变成圆.
    • margin(auto,居中保持两边一致);支持逐个输入,分别是margin-top,margin-right,margin-bottom,margin-left. 支持负值.
    • float:放置位置,left/right,会一个挨一个一行放置(不够位置就换行),注意这个left/right是相对剩余空间而言。
    • clear:right/left/both 当有使用float的元素时,使用clear时,若有对应位置的float的元素,则换新行(取消float的同行设定)。
    • right/left/top/bottom相对位置偏移,针对核心部分,受position控制。
    • positionstatic(默认)/absolute/relative/fixed/inherit 子元素相对母元素的位置。static是默认的放置,不管left等的变化。absolute是相对非static的上级父元素的left时的位置,若没有则根据html的位置; relative是相对用static时的位置而言;fixed是固定位置,不受滚动条控制。
    • z-index:叠放时的优先序
    • overflow: 溢出后滚动条,一般auto就可以了.scroll就会一直在.

PS: margin控制边缘空白,padding控制和边界的距离,border为边界宽度。margin:auto为左右相等,即居中处理。1 2 3 4表示上右下左顺时针的距离,若只指明一个表示四面一样。也可以专用margin-top/right/bottom/left来指明。同理border和padding。注意padding会使用bgcolor。注意这些px值可以为负值,因为相对位置。

boxdim

一些常用的字体. 名字大小写敏感. CSS最基础三种: serif, sans-serif, cursive.

font-family

JavaScript

HTML网页支持的脚本语言.基于Java语言开发.用于很多复制操作和调用. 这里不进行讨论了, 可以参加另外的Ref4教程.

  • document.writeln("context")将内容写到html页面上.

CSS:Cascading Style Sheets

  • 选择器: 选择器 {属性 : 值;.....} : 选择器一般是各种网页元素如p,img,div等,属性和值和一般style设置类似规则.
    • css注释和c一致,采用/* *///格式。
    • 多个选择器可以同时设置,此时使用,分隔,如ol,ul,li{..}.
    • #id名要是定义了id,可以用此来定义特点。
    • .ClassName要是定义了class,对应用此来指明类别特点.
    • .bold 将对bold特点体进行修饰.
    • 选择器若为某种标签,可根据嵌套环境作选择,例如div div p {…}这样。用*可以作通配所有选择器。
    • div > p {....} 强制直接相连,否则div li p {}也会受影响。
    • 优先级: ID>Class>特点环境元素>一般元素>通配*
  • 准类选择器: selector: pseudo-class-selector{...} 准类选择器为更针对地对一些改变和行为的样式. 如:
    • hover悬停,link未点击,visited 已点击,
    • first-child第一个满足条件的元素,nth-child(n)第N个满足的元素,类似地last-child.
    • 注意selector:nth-child(n)selector :nth-child(n)有区别,没有空格的前者是body中第n个的selector,有空格的后者是selector中第n个子元素。
selector {
	property: value;
}
p,span {
	font-size: 16px;
	font-family: Courier;
	//background-color: green;
}

#hello {
	color: #8B1C62;
}

.class {
	border:1px dashed black;
}

div ol > li {
	font-size: 10px;
}

p:nth-child(3){
	font-weight:bold;
}

Reference

  1. html术语表
  2. css术语表
  3. w3school
  4. Javascript基础篇
  5. HTML标签参考手册


◆ 本文地址: http://platinhom.github.io/2015/06/22/HTML-basic/, 转载请注明 ◆

前一篇: Sublime-Markdown-Github联合使用
后一篇: Javascript基础篇


Contact: Hom / 已阅读()
Source 类别: Coding  标签: HTML  Web  Key