【html+css】前端学习笔记1-CSDN博客

本文链接：https://blog.csdn.net/minggelin1997/article/details/109356740

【html+css】前端学习笔记

1. HTML 与 XHTML区别

DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合

2. strong与b、em与i

strong b —— 文本加粗
em i——文本斜体
区别：strong i 具有语义化

3. 引用标签

blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息
cite : 引用著作的标题

4. iframe标签

可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
使用场景
1. 数据传输
2. 共享代码
3. 局部刷新
4. 第三方介入

5. br 与 wbr

br 就是换行
wbr 就是软换行（在指定时机进行换行）

<p>
        hello ahsj  jdhakj  hshdhdsj  sjdhsj asdsad hello ahsjjdhakjhshdhdsj XML<wbr>HTTP<wbr>Request  sjdhsj asdsad
    </p>

在这里插入图片描述

6. pre 与 code

针对网页中的程序代码的显示效果
markdown语法

7. map 与 area

给特殊图形添加链接
area能添加的热区的形状：矩形、圆形、多边形

8. embed 与 object

嵌入一些多媒体，如flash和动画
给flash和一些插件进行渲染操作的标签。
object配合param使用

        <object>
            <param name="movie" value="./img/flash.swf">
        </object>

9. audio 与 video

引入音频与视频的标签
属于H5的新功能

        <!-- <audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio> -->
    <!-- <video src="./img/Intermission-Walk-in_512kb.mp4" controls></video> -->
    <video>
        <source src="./img/Intermission-Walk-in.ogv"></source>
        <source src="./img/Intermission-Walk-in_512kb.mp4"></source>
    </video>

    <div style="position: relative; height:250px; overflow: hidden;">
            <video style="min-width:100%; min-height:100%;" loop="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-fullscreen="false" x5-video-player-type="h5" id="introvideo" autoplay="">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" type="video/mp4">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.webm" type="video/webm">
            </video>
    </div>

在这里插入图片描述

10. 文字注解

ruby 、 rt 组合
ruby定义注释(中文注音或字符)
rt定义发音或解释
bdo标签可覆盖默认的文本方向

<head>
    span{ direction: rtl; unicode-bidi:bidi-override; }
    </style>
</head>
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">爱神的箭</bdo>卡后端框架爱迪生
    </p>
    <p>
        <span>爱神的箭</span>卡后端框架爱迪生
    </p>
   
</body>

在这里插入图片描述

11. link扩展学习

添加网址标题栏前的小图标：

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">

DNS预解析：

<link rel="dns-prefetch" href="//static.360buyimg.com">

12. meta扩展学习

meta添加一些辅助信息
优化、页面渲染

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团购">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

在这里插入图片描述

13. HTML5新的语义化标签

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航
注：header、footer、main 在一个网页中只能出现一次。
article : 独立的内容
aside : 辅助信息的内容
section : 区域
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

在这里插入图片描述

datalist : 选项列表
details / summary : 文档细节 / 文档标题
progress / meter : 定义进度条 / 定义度量范围
time : 定义日期或时间
mark : 带有记号的文本

14. 表格扩展学习

添加单线 : border-collapse : collapse
隐藏空单元 : empty-cells : hide
斜线分类 : border / rotate
列分组 : colgroup / col

15. 表单扩展学习

美化表单控件： 1. label + :checked 2. position + opacity
新的input控件
email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件