Html基础知识详解_html/css_WEB-ITnose
1.1 大小颜色位置
Html和CSS的关系 Hello World!
1.2 强调
如在网上商城中,某产品的打折后的价格是需要强调的。如下图。
代码实现:
1.3 span
标签是没有语义的,它的作用就是为了设置单独的样式用的。
我来试试:把“美国梦”设置为蓝色
1. 在右部编辑器中的第13行对“美国梦”文本加上标签。
2. 在第8行输入color:blue;,为元素设置文本颜色为蓝色。
1 2 3 4 5了不起的盖茨比 6 11 12 131922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道美国梦,他搬入纽约附近一海湾居住。
14菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
15 16
1.4 引用
比如引用一句诗歌,用双引号,网页利用,自动识别为双引号;
上一节标签不是也是对文本的引用吗?不要忘记
标签是对简短文本的引用,比如说引用一句话就用到
标签。
如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用blockquote>。
注意事项blockquote,不是blackquote,浏览器对blockquote>标签的解析是缩进样式。
既然缩进了,那么不用加双引号。
1.5 换行
比如一手绝句,前三行每行后面
,最后一行不需要。
1.6 割线
和
一样,是一个灰色的分割线。
1.7 address
地址标签,其实就是斜体,功能和em一样。
1.8 代码标签
单行用,多行用
1.9列表
2.1 table
…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:
产品名称 | 17品牌 | 18库存量(个) | 19入库时间 | 20
---|---|---|---|
耳机 | 23联想 | 24500 | 252013-1-2 | 26
U盘 | 29金士顿 | 30120 | 312013-8-10 | 32
U盘 | 35爱国者 | 36133 | 372013-3-25 | 38
2.2 超链接
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
加入超链接后为蓝色,点击后为紫色。
发邮件
2.3图像
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件
2.4 textarea
1、
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在
举例:
2.4 label
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
我来试试:完成下面任务
要求:慢跑、登山和篮球复选框要与各自的复选项用for属性关联。效果图如下
1 2 3 4 518 19 20 三、补充form中的lable标签 6 7 8 9
网页中所有显示的内容都要放在标签中。
标签不区分大小写。
网页中展示的内容在body里。
em标签是强调,就是斜体。
Strong加粗。
SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。
例子如下:
some text.some other text.
例子解释如下:
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
上一篇: PHP基础
推荐阅读
-
详解html5 canvas常用api总结(二)--绘图API
-
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
-
详解HTML5中表单验证的8种方法介绍
-
详解前端HTML5几种存储方式的总结
-
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
-
详解HTML5 window.postMessage与跨域
-
详解使用HTML5 Canvas创建动态粒子网格动画
-
HTML5 拖放(Drag 和 Drop)详解与实例代码
-
详解Html a标签中href和onclick用法、区别、优先级别
-
实例详解PHP中html word 互转的方法
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论