html周课堂笔记

body元素中放的就是显示在页面中的内容 包含很多的标签元素和文本、图像、声音、视频等等内容

标题： h1,h2,h3,h4,h5,h6 显示在页面上字体按顺序由大到小

段落： p /p

换行： br /

分割线 ： hr /

引用短的句子：q./q 显示在页面中就是将句子加了一个“双引号”，但是不要只为了需要双引号而是用 q

引用大块的句子或段落：blockquote cite="" ，/blockquote 显示在页面是整体缩进,但是不要只为了需要缩进而使用blockquote,cite属性值是引用的出处

定义作品标题：cite /cite

粗体：b /b

斜体： i /i

强调： em /em 显示为斜体，不要为了使用斜体而是用em

强调： strong /strong 比em更强烈的强调，显示为粗体,不要为了使用粗体而是用strong

计算机代码： code /code

保留： pre /pre 可以保留文档中的空格、换行和TAB

上标： sup /sup

下标： sub /sub

无意义标签： div /div ,可作为容器，用来布局； span /span ,可以用来和css配合改变文字的样式

全局属性：id 必须以字母开头（大小写都可），后面跟字母(大小写都可)、数字(0-9)、连字符("-")、下划线("_")、冒号("? 以及点号(".")；文档中不能有相同的ID名称；

          class      必须以字母开头（大小写都可），后面跟字母(大小写都可)、数字(0-9)、连字符("-")、下划线("_")；文档中可以有相同的class名称；

          style      行内样式 

          title        显示额外信息

注释： !-- 注释内容 –

实体字符：

               <

                 >

        &      &

        空格    

        ©      ©

        更多实体字符  http://www.w3cschool.cn/htmltags/ref-entities.html

图像： img src=“图像所在路径” alt="" / , alt中的文本描述图片基本信息，当页面加载不出来图片的时候就会显示alt中的文本；

img src="#" width="" height="" usemap="#map" /
map name=“map”
area shape=“rect” coords=“0,0,50,60” href="#" /area
area shape=“circle” coords=“0,0,50” href="#" /area
/map

超链接： a 有以下几种使用情况，

  1.文本超链接      a href="http://www.cnblogs.com/yunmengshu/" target="_blank" title="超链接到我的博客"   超链接 /a       target属性有 _self (默认，在当前页面打开链接页面)，_blank (在新的窗口打开连接页面)，_top (在整个窗口中打开被链接文档)，和 iframe   中name属性配合显示在iframe中的页面。    title中的内容在鼠标放在链接文本上的时候会显示出来

  2.图像超链接     a href="http://www.cnblogs.com/yunmengshu/" target="_blank"    img src="图像所在路径" alt="" /    /a       

  3.定义锚点  

body
a id=“tips” 锚点 /a // id 或者 name 都可以
a href="#tips" 回到锚点 /a
/body

4.显示在iframe中

body
a href=“http://www.cnblogs.com/yunmengshu/” target=“a” 显示在iframe中,咻 /a
iframe name=“a” /iframe

  5.链接到邮箱或者手机

body
a href="mailto:yinyupiaoxue@126.com" target="_blank"" 联系邮箱 /a
a href=“tel:###########” 联系手机 /a

a href="mailto:yinyupiaoxue@126.com?cc=1023027599@qq.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email" 联系邮箱 /a
%20在这里代表空格

/body

无序列表

ul

li html /li

li css /li

li javascript /li

/ul

注：无序列表默认实心黑色圆点，type属性可以改变，共有三个值：disc（默认）,circle（空心圆点）,square（实心黑色方块）。当然用css最好。

有序列表

ol

li html /li

li css /li

li javascript /li

/ol

注：有序列表默认数字排序，type属性可以改变，有好几个值：1（数字）, a（字母）等等；shart属性可以改变排序从第几个开始，比如数字排序，start=“2”,排序第一个就不再是 1 ，而是 2 。用css改变样式。

自定义列表

dl

dt html /dt

dd 表述页面的标记语言 /dd

/dl

注：ul ol dl 之间是可以相互嵌套的。

表格

table

caption table标题 /caption

thead

tr

th 表头 /th

td 单元格 /td

/tr

/thead

tbody

tr

th 表头 /th

td 单元格 /td

/tr

/body

tfoot

th 表头 /th

td 单元格 /td

/tr

/tfoot

/table

注：td 或 th 的 colspan 属性可以合并列， rowspan 可以合并行。table 的 cellspacing 属性控制单元格间距， cellpadding 属性控制单元格边距。

表单

form action="" method="" // actioin 表单提交地址; method 表单提交方式 post 或者 get; 定义id属性，可以让表单外的表单元素用 form 属性关联到此表单中
fieldset // 分区
legend 分区标题 /legend
账号： input type=“text” name="" / br /
密码： input type=“password” name="" / br /
learn: br /
label input type=“radio” name=“ht” checked=“checked” / html /label // 同一组 radio 的 name 值必须相同；checked 默认选中
label input type=“radio” name=“ht” / css /label // input 外加 label 为了点击字体的时候也可选中radio ;另一种方法是 label 中的 for 属性和 radio 的 id 属性值相同
label input type=“radio” name=“ht” / javascript /label br /
like: br /
label input type=“checkbox” name=“l” value=“骑行” / 骑行 /label //
label input type=“checkbox” name=“l” value=“书法” checked=“checked” / 书法 /label
label input type=“checkbox” name=“l” value=“旅行” / 旅行 /label
/fieldset
城市：
select
option 北京 /option
option selected=“selected” 上海 /option // selected 默认选中
option 郑州 /option
/select br /
简介： br /
textarea cols=“30” rows=“5” /textarea br /
input type=“submit” name="" /
input type=“reset” name="" /
input type=“button” name="" value=“按钮” / // 按钮还是用 button 标签好一些
br /
button type=“submit” 提交 /button
/form

display 禁用； required 必须填写项； placeholder 提示词（显示灰色）；multiple 可多选；min max 最小值、最大值；width 和 height input属性；
input 的 type 属性还有其他值，比如，email，url,number, search,range,color,data,aurofocus
还有list 和 datalist 的配合使用预选项
form 也有新属性 这些等慢慢研究了再写

视频

video width="" height="" // controls 显示控制条； autoplay 自动播放；loop 循环播放；单个文件可以直接放在 src 属性中
source src=“movie.mp4” type=“video/mp4” /
source src=“movie.webm” type=“video/webm” /
source src=“movie.ogg” type=“video/ogg” /

/video

音频 （同 video）

audio width="" height=""
source src=“music.mp3” type=“audio/mp3” /
source src=“music.wav” type=“audio/wav” /
source src=“music.ogg” type=“audio/ogg” /

/audio