html周课堂笔记

news/2024/11/26 0:25:58/

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


http://www.ppmy.cn/news/351957.html

相关文章

html笔记

HTML是一种描述网页的语言&#xff0c;指的是超文本标记语言&#xff1b;HTML并不是编程语言&#xff0c;而是一种标记语言&#xff01; HTML标签&#xff1a;由尖括号包含的关键词&#xff0c;如<html></html>&#xff1b;一般都是成对出现的&#xff0c;如<…

基于javaswing实现PC端课堂点名程序详细设计

1.系统分析 本系统是基于PC/windows10/Eclipse/Jcreator Pro/JBuild/JDK1.8环境下开发设计的&#xff0c;编写是采用java语言&#xff0c;主要体现了对学生随机点名提问情况的考核和统计记录功能&#xff0c;该系统简单易用&#xff0c;运行稳定&#xff0c;使用者可以直接导入…

那些堪称软件神器的工具或网站

转载&#xff1a;http://blog.sina.com.cn/s/blog_7f5571aa0102vvvs.html 那些堪称软件神器的工具或网站 维棠 - 全新的视频体验&#xff1a;秒杀各类视频网站&#xff08;去找第三方做的绿色版吧……官方广告太多了&#xff09;。 Internet Download Manager: the fastest dow…

【转帖】CorelDraw快捷键的使用大全

显示导航窗口(Navigator window) 【N】 运行 Visual Basic 应用程序的编辑器 【Alt】【F11】 保存当前的图形 【Ctrl】【S】 打开编辑文本对话框 【Ctrl】【Shift】【T】 擦除图形的一部分或将一个对象分为两个封闭路径 【X】 撤消上一次的操作 【Ctrl】【Z】 撤消上一次…

HTML入门基础(1)

目录&#xff1a; 一&#xff0c;怎么建立简单的网页1. 认识基础标签2. 创建一个最简单的网页 二&#xff0c; HTML的基础知识1. 基础标签&#xff08;1&#xff09;.html字体基础标签1>. 文字颜色2> .设置文字的尺寸3> . 设置文字字体4> .设置文字的格式&#xff…

2021年1月29日 B站学习资料汇总

【Adobe After Effects( AE ) 实用学习教程合集】 AE&#xff08;cc&#xff09;教程全集 http://t.cn/Rb3G6dp AK大神AE系列教程合集 http://t.cn/RZVtdi5 AE零基础从入门到精通教程合集 http://t.cn/RJFK…

ff写法 图片_花体f怎么写

1. 26个英文字母的花体写法 1、Aa、Bb、Cc、Dd、Ee、Ff、Gg、Hh、Ii、Jj、Kk、Ll、Mm、Nn、Oo的花体写法如图: 2、Pp、Qq、Rr、Ss、Tt、Uu、Vv、Ww、Xx、Yy、Zz的花体写法如图: 扩展资料: 字母书写技巧: (1)应按照字母的笔顺和字母在三格中应占的位置书写。 (2)每个字母都应…

(上)史上最全 Flink SQL 成神之路(全文 18 万字、138 个案例、42 张图)

1.前言 看了那么多的技术文&#xff0c;你能明白作者想让你在读完文章后学到什么吗&#xff1f; 大数据羊说__的文章会让你明白 博主会阐明博主期望本文能给小伙伴们带来什么帮助&#xff0c;让小伙伴萌能直观明白博主的心思 博主会以实际的应用场景和案例入手&#xff0c;不…