HTML+CSS复习之HTML基础篇

一些说明

写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法

这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样的认识

我把HTML标签分成两大类,重要的和不重要的,希望大家都能从众多标签中解脱出来!!

本文的宗旨,简明扼要!最快入门 HTML (把我给出的代码不断地敲,并且适当加点个性化的东西,HTML标记语言你就入门了)

温故而知新

HTML,超文本标记语言(HyperText Markup Language)只是标记,没有任何逻辑,学习起来会很快的

结构如下:

这里写了可以出现在head内的所有标签<!DOCTYPE html> //HTML5的文档声明,现在都用这种方式了<html> //文档的根 <head> //文档的头部信息 <meta charset="utf-8"> //表示该文档是以UTF-8编码的 <title>菜鸟教程(runoob.com)</title> //页面标题 //为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> //为网页定义描述内容: <meta name="description" content="Free Web tutorials on HTML and CSS"> //定义网页作者: <meta name="author" content="Hege Refsnes"> //每30秒中刷新当前页面: <meta http-equiv="refresh" content="30"> <style>a{CSS样式}</style> <link rel="stylesheet" type="text/css" href="xxx.css"> <script>脚本</script> <script type="text/javascript" src="xxxx.js"></script> <noscript></noscript> //该标签作为HTML文档中所有的链接标签的默认链接: <base href="http://www.runoob.com/images/" target="_blank"> </head> <body> //网页主题部分 <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body></html>关于文档声明:(了解即可,没什么作用)HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tips:注释长啥样?<!-- html content-->

直击主题:HTML标签

来,我们来看看HTML的标签都有哪些

h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input , label , select , table td ,tr , tbody , tfoot , theadhr , html , body head title meta style script ,input , label , legend , div , span

基本上你只要看到这个标签,懂这个标签一般是怎么用的就OK了!

重点掌握的标签有(一些特别基础性的标签不在此之内)

超链接标签a:只要是a标签能包含啥,那个被包含的都是超链接

a的常用方法如下:

1、<a href = "http://xxxx.xxx" target="_blank">2、电子邮件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">3、取消链接 <a href="javascript:void(0)">4、锚点 <a href="#tips">可以链接到本页面id为tips的元素,用于页面内跳转<a href="javascript:void(0)">hello</a>

<p>图像标签img:</p>

img[src,title,alt,width,height]<img src="xxxx.png" width=300 height=200 title="pic" alt="person">alt : 当图片无法加载时替代图片,一般都要写的1、图片一个特殊用处(结合map,基本不用) <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

<p>表格</p>

一般我们写表格的时候,table>tr>td(th),采用这三层结构

一个完整的表格结构是这样的 <table> <caption></caption> <thead> <tr> <th></th> ..... </tr> </thead> <tbody> <tr> <td></td> ...... </tr> </tbody> <tfoot> <tr> <td></td> ...... </tr> </tfoot> </table>

属性注意

<table border=0> //设置整个table的边框,外框和内框<table cellpadding="10"> //相当于设置这个表格每个单元格的 padding 为 10px <table cellspacing="10"> //相当于设置这个表格每个单元格的 margin 为 10px<th colspan="2"> // 这个单元格跨了两列 tr也可以用<th rowspan="2"> //这个单元格跨了两行 tr也可以用

列表

有序列表

<ol> <li></li> <li></li> ...</ol>

无序列表

<ul> <li></li> <li></li> ...</ul>

无序列表和有序列表,可以更改前面的标记类型,但是不常用,采用图片或者iconfont居多,可以采用list-style-image:url("xxx.png) ;来设置,这个在CSS学习笔记中会详细说明

列表支持嵌套

自定义列表

dl 注意一个dl里面最好只有一个dt,行业潜规则 原意是解释名词, dt 一般一条信息,只解释一个名词,也就是一个dt dd dd dddl

div -- 最具有代表性的块级标签

通常用于布局,很常见的div+css布局,为什么采用div呢?因为div是一个容器元素,div内部可以包含很多标签,
div内部可以有div的
div是块级标签,注意,任何块级标签写在页面上,宽度都是占据父容器的百分之百,除非你设置块级元素的宽度,具体的怎么排版,请看这篇:HTML+CSS复习之CSS基础篇

span -- 最具有代表性的行级标签

span是一个行级标签,所谓行级标签的意思是,内容有多大,我在页面中占据的位置就有多大(内容+padding)

input --表单

表单的属性特别多,可以去W3C看一遍,这里就不详细讲了,毕竟是写个入门啦。表单主要用作数据传递,所以对表单的理解,就是要搞明白,表单的那些属性是怎么回事
一个表单完整书写

<form action="url" method="post/get" > //文本框 <input name="username" type="text" /> //密码框 <input name="password" type="password" /> //单选框(注意name要相同,是同一类行的选择,以便后台拿到数据) <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female //多选框(注意name要相同,是同一类行的选择,以便后台拿到数据) <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car //下拉框 <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> //这种是为下拉框分组 <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> //文本域 <textarea name="textarea" rows="10" cols="30"> 我是一个文本框。 </textarea> //提交按钮,下面的提交按钮,默认提交到action地址 <input type="submit" value="Submit"> <button>submit</button> //这是另外一种形式的表单,注意其中的区别即可, //fieldset标签也只会在这种场合使用了 <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> //datalist标签,input的list属性绑定到datalist的id,就可以完成这项工作了 <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> //注意label标签 , 通过绑定input的id来实现在label出点击获取焦点,有两种写法 <label for="name">用户名</label> <input id="naem" type="text" size="30"> <label>Hello<input type="text" size="30"></label></form>

实例如下:

<label for="name">用户名??</label><input id="name" type="text" size="30">????<label>Hello??<input type="text" size="30"></label>

注意: Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。

output标签,顾名思义,输出标签,那么从何处输入,定义规则是怎么样的呢?

form定义规则 ,那么你可不可以写一个升级版的呢?

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 //数据源 +<input type="number" id="b" value="50"> //数据源 =<output name="x" for="a b"></output> //计算出结果</form>

iframe --一般重要的标签

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>iframe显示的地址页面内容,制定高度和宽度,frameborder移除边框

用iframe来显示页面内部链接

<iframe src="www.baidu.com" name="iframe_a"></iframe><p><a href="http://www.google.com" target="iframe_a">Google</a></p>

全局属性

这些属性,基本上不怎么使用,了解即可。
accesskey 规定激活元素的快捷键。
一下元素支持accesskey属性

<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a><a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>

例子:
HTMLCSS

  • class 规定元素的一个或多个类名(引用样式表中的类)。

  • contenteditable 规定元素内容是否可编辑。

  • contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

  • data-* 用于存储页面或应用程序的私有定制数据。

  • dir 规定元素中内容的文本方向。

  • draggable 规定元素是否可拖动。

  • dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。

  • hidden 规定元素仍未或不再相关。

  • id 规定元素的唯一 id。

  • lang 规定元素内容的语言。

  • spellcheck 规定是否对元素进行拼写和语法检查。

  • style 规定元素的行内 CSS 样式。

  • tabindex 规定元素的 tab 键次序。

  • title 规定有关元素的额外信息。

  • translate 规定是否应该翻译元素内容。

空元素标签

br , hr

HTML5标签

article, aside , audio , bdi , canvas , datalist , command , details ,dialog , embed ,figcaption ,figure ,footer ,header , keygen , mark , meter , nav , output , process , rp ,rt , ruby , section , source , summary , time , track , video , wbr

这些都是html5的标签,一眼便能看出,更加语义化了,如果想看html5标签详解,请看这里:[HTML+CSS复习之HTML5基础篇]()

不重要的标签

b(定义文本粗体) , i(定义文本斜体) , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定义文档作者或拥有者的联系信息) , abbr(定义缩写) , acronym(定义只取首字母的缩写,不支持HTML5) , bdo , blockquote , q , cite , dfn , colgroup , col , center, font , dir(与ul差不多,兼容性不如ul) , frame/frameset(这两个标签已经没人用了,主要是用了这个标签,交互就做不了)

<code>计算机输出</code><br /><kbd>键盘输入</kbd><br /><tt>打字机文本</tt><br /><samp>计算机代码样本</samp><br /><var>计算机变量</var><br /><b>注释:</b>这些标签常用于显示计算机/编程代码。<acronym title="World Wide Web">WWW</acronym><bdo dir="rtl">该段落文字从右到左显示。</bdo>

标签嵌套规则

a标签不能嵌套a标签,p标签不能嵌套块级标签

相关文章