记录尚硅谷HTML+CSS笔记
- 一、HTML基础
- 1. 网页的结构
- 2. html中的“实体”
- 3. meta标签
- 4. 语义化标签
- 5. 列表
- 4. 超链接
- 5. 图片
- 6. 内联框架
- 7. 音视频
- 8. 表格
- (1) 长表格
- (2) 表格的样式
- (3) 表单的简介
-
前端的三种语言:HTML(结构) 、CSS样式(表现) Javascript(行为)
-
标准: W3C 万维网 定制的网页标准
-
基本结构:
元数据,给浏览器搜索引擎看的 想要被看到的内容 标签一般成对出现但是存在自结束标签,例如``,``,H5不推荐写自结束的`/ ` **注释的写法**``,**注释不能嵌套**
- 标签的属性:在标签的开始/自结束标签前面写,是一个名值对结构
这是我的第三个网页 属性之间用空格隔开
- 网页的基本结构
html5声明 字符集应该与编辑器的一致
- 迭代版本:HTML4,XHTML2.0、HTML5…
- 文档声明(doctype):文档声明告诉浏览器网页的版本
- 乱码问题:编码解码字符集不一致,通过可以解决
告诉浏览器你写的是英文网站,到时候会d出是否翻译,中文则为
2. html中的“实体”在网页中,编写的多个空格会自动被浏览器解析为一个空格,目的是方便格式化代码
但是在html中有时候不能书写一些特殊符号,比如字母两侧的 ‘<’ ‘>’ 号 那么我们就需要实体(转义字符)语法是"&“开头”;"结尾,例如:
- 是空格
- > 是大于
- < 是小于
- ©是版权号
meta主要用于设置网页的元数据,元数据是并不是给用户看的,其组成有两个:
属性:
- name: 指定数据名称
- content: 指定数据内容
- charset: 网页采用的字符集,他的写法是另一种键值对的,见下
- keywords: 搜索引擎用的关键词,用逗号隔开
- description: 搜索引擎蓝字下面的那个
- auther:作者
- title:标题,会作为搜索引擎的结果标题表示
- http-equiv:协议,其中http-equiv=“refresh” 几秒后跳转网页到
语义化标签在HTML中表示特定的结构,但是会在显示的时候存在样式的变化。但是注意HTML是专门负责网页结构的,所以在使用html标签时应该关注的是标签的语义而不是标签的样式
-
标题标签
- :是最重要的仅次于title,一般只有一个h1 (一般只用到h1到h3)
:标签,表示一个段落,也是一个块元素
- :标签:将h标题分组
- :是语音语调的加重,是一个行内元素
- :表示强调
: 表示一个长引用 : 表示一个短引用
:换行
一级标题 二级标题
123
456
回乡偶书 其一今天天气真不错
你今天必须要完成作业
鲁迅说:我是从来没有说过的
子曰学而时习之
今天天气真不错
p元素里不能放任何块元素,浏览器会对网页自动修正,例如在html外的元素,把h1放在p里面,浏览器不会再源码里纠正,但是会在加载的内存中纠正,在检查元素中显示纠正结果
结构化语义标签(用的不多)
- 结构化语义标签
: 网页头部 : 网页的主体部分(只有一个) - : 侧注释,与主体相关的其他内容
- : 独立的文章
: 其他的独立区块
- 结构化无意义标签
- : 没有语义。表示一个独立区块
- : 行内元素,没有语义。用来选中元素
- 无序列表 ul
- 有序列表 ol
- 定义列表 dl
- dt 定义的内容
- dd 对定义进行解释说明
- 内容用 li
- 结构
- 表现
- 行为
- 结构
- 表现
- 行为
- 结构
- 解释解释解释解释
- 解释解释解释解释
- 解释解释解释解释4
-
- 结构
- 表现
- 行为
- 表现
- 行为
-
作用:超链接让页面跳转到另一个位置或者其他页面
-
实现用定义超链接
是一个行内元素可以嵌套除他自身以外块的元素 -
标签的属性:
href:目标跳转路径
值可以是外部网站地址,也可以是内部页面地址
#是回到顶部
#ID跳转到页面指定位置
在开发中可以用javascript:;这样什么也不发生target属性,可选值
_self 默认值,在当前页面打开
_blank 在新的页面打开
注意:ID是唯一属性,不能一样,字母开头,区分大小写,靠前的元素优先生效
5. 图片-
作用:
标签用于引入图片
-
定义:
使用标签引入外部标签,img是一个自结束标签
属于替换元素,属于行内元素和替换元素之间的一种元素,即这段代码被具体的东西给替换了
-
属性:
- src 属性指定的外部路劲
- alt 对于图片的描述,描述默认情况下是不会显示的,会在图片显示不出来的时候显示,搜索引擎会通过alt来搜索图片
- width 指定图片的宽度(单位是像素)
- height 指定图片的高度(单位是像素)
-
注意:
如果只修改了一个,图片会被等比例缩放,如果指定了两个图片就不会等比例变化
一般在PC端不建议修改图片的大小,为了节省网络资源,最好直接在做图的时候改好,但是在移动端经常会把图片缩小 -
图片的格式:
- jpg(jpeg)
颜色多,不支持透明,不支持动图
一般用于显示照片 - gif
支持的颜色少,支持简单透明,支持动图
颜色单一的动图 - png
颜色丰富,支持透明,不支持动图
颜色丰富,复杂透明(转为网页而生) - webp
谷歌新推出的,专业用于网络的格式
具有其他图片格式的优点,文件特别小
兼容性不好(例如IE) - base64
使用base64进行编码,这样可以直接把图片转化为字符,通过字符格式引入
一般都是需要与网页一起加载的图片
- jpg(jpeg)
-
作用:
-
定义:
向网页引入音频文件,音视频文件引入的时候默认情况下是不允许用户 *** 作的
-
属性:
- controls 只有键没有值 是否允许用户控制播放
- autoplay 音频是否自动播放(兼容性差,例如火狐不自动播放)
-
除了通过src实现之外,还可以通过source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持,所以要输出提示,原理是:进入标签,如果匹配到source,那么浏览器会自动忽略内部其他代码,实现选择,IE8不认识source所以会自动忽略所有source标签,于是只找到提示信息,自动不全p标签,输出提示
对不起你的浏览器不支持播放音频,请升级浏览器
视频标签是video,同理:
8. 表格
- 标签
- 属性
- colspan:横向合并的单元格
- rowspan:纵向合并的单元格
- 标签
(2) 表格的样式日期 收入 支出 合计
(3) 表单的简介
-
现实生活中用来提交数据,网页中也可以使用表单,用来将数据提交给服务器。
-
标签
-
属性
type 类型
autocapitalize 自动补全
readonly 设置为只读模式 ,只读数据会提交
disable 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)