[java-web]-HTML笔记_随笔

[java-web]-HTML笔记

记录尚硅谷HTML+CSS笔记

文章目录

- 一、HTML基础
- - 1. 网页的结构
  - 2. html中的“实体”
  - 3. meta标签
  - 4. 语义化标签
  - 5. 列表
  - 4. 超链接
  - 5. 图片
  - 6. 内联框架
  - 7. 音视频
  - 8. 表格
  - - (1) 长表格
    - (2) 表格的样式
    - (3) 表单的简介

一、HTML基础 1. 网页的结构

前端的三种语言：HTML(结构) 、CSS样式(表现) Javascript(行为)
标准： W3C 万维网定制的网页标准
基本结构：



    元数据，给浏览器搜索引擎看的


    想要被看到的内容



标签一般成对出现但是存在自结束标签，例如``,``,H5不推荐写自结束的`/
`
**注释的写法**``，**注释不能嵌套**

标签的属性：在标签的开始/自结束标签前面写，是一个名值对结构

这是我的第三个网页

属性之间用空格隔开

网页的基本结构

   html5声明

    
        
        字符集应该与编辑器的一致

迭代版本：HTML4，XHTML2.0、HTML5…
文档声明（doctype）:文档声明告诉浏览器网页的版本
乱码问题：编码解码字符集不一致，通过可以解决

告诉浏览器你写的是英文网站，到时候会d出是否翻译，中文则为

2. html中的“实体”

在网页中，编写的多个空格会自动被浏览器解析为一个空格，目的是方便格式化代码
但是在html中有时候不能书写一些特殊符号，比如字母两侧的 ‘<’ ‘>’ 号那么我们就需要实体(转义字符)语法是"&“开头”;"结尾，例如:

是空格
> 是大于
< 是小于
©是版权号

3. meta标签

meta主要用于设置网页的元数据，元数据是并不是给用户看的，其组成有两个：

属性：

name：指定数据名称
content：指定数据内容
charset：网页采用的字符集，他的写法是另一种键值对的，见下
keywords：搜索引擎用的关键词，用逗号隔开
description：搜索引擎蓝字下面的那个
auther：作者
title：标题，会作为搜索引擎的结果标题表示
http-equiv：协议，其中http-equiv=“refresh” 几秒后跳转网页到

4. 语义化标签

语义化标签在HTML中表示特定的结构，但是会在显示的时候存在样式的变化。但是注意HTML是专门负责网页结构的，所以在使用html标签时应该关注的是标签的语义而不是标签的样式

标题标签
- ：是最重要的仅次于title，一般只有一个h1 (一般只用到h1到h3)
- ：标签，表示一个段落，也是一个块元素
- ：标签：将h标题分组
- ：是语音语调的加重，是一个行内元素
- ：表示强调
- ：表示一个长引用
- ：表示一个短引用
- ：换行
一级标题二级标题
123

456
回乡偶书其一
今天天气真不错

你今天必须要完成作业
鲁迅说：
我是从来没有说过的
子曰学而时习之

今天天气真不错

p元素里不能放任何块元素,浏览器会对网页自动修正，例如在html外的元素，把h1放在p里面，浏览器不会再源码里纠正，但是会在加载的内存中纠正，在检查元素中显示纠正结果
结构化语义标签(用的不多)

结构化语义标签

: 网页头部
: 网页的主体部分(只有一个)
: 网页底部
: 网页的导航
: 侧注释，与主体相关的其他内容
: 独立的文章
: 其他的独立区块

结构化无意义标签

: 没有语义。表示一个独立区块
: 行内元素，没有语义。用来选中元素

5. 列表
无序列表 ul
有序列表 ol
定义列表 dl
dt 定义的内容
dd 对定义进行解释说明

内容用 li

结构

表现

行为

结构

表现

行为

结构

解释解释解释解释

解释解释解释解释

解释解释解释解释4

结构

表现

行为

表现

行为

4. 超链接

作用：超链接让页面跳转到另一个位置或者其他页面

实现用定义超链接
是一个行内元素可以嵌套除他自身以外块的元素

标签的属性：

href:目标跳转路径

值可以是外部网站地址，也可以是内部页面地址
#是回到顶部
#ID跳转到页面指定位置
在开发中可以用javascript:;这样什么也不发生

target属性，可选值

_self 默认值，在当前页面打开
_blank 在新的页面打开

注意：ID是唯一属性，不能一样，字母开头，区分大小写，靠前的元素优先生效
5. 图片

作用：

标签用于引入图片

定义：

使用标签引入外部标签，img是一个自结束标签

属于替换元素，属于行内元素和替换元素之间的一种元素，即这段代码被具体的东西给替换了

属性：

src 属性指定的外部路劲
alt 对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过alt来搜索图片
width 指定图片的宽度(单位是像素)
height 指定图片的高度(单位是像素)

注意：

如果只修改了一个，图片会被等比例缩放，如果指定了两个图片就不会等比例变化
一般在PC端不建议修改图片的大小，为了节省网络资源，最好直接在做图的时候改好,但是在移动端经常会把图片缩小

图片的格式：

jpg(jpeg)
颜色多，不支持透明，不支持动图
一般用于显示照片
gif
支持的颜色少，支持简单透明，支持动图
颜色单一的动图
png
颜色丰富，支持透明，不支持动图
颜色丰富，复杂透明(转为网页而生)
webp
谷歌新推出的，专业用于网络的格式
具有其他图片格式的优点，文件特别小
兼容性不好(例如IE)
base64
使用base64进行编码，这样可以直接把图片转化为字符，通过字符格式引入
一般都是需要与网页一起加载的图片

6. 内联框架

作用：

7. 音视频

定义：

向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户 *** 作的

属性：

controls 只有键没有值是否允许用户控制播放
autoplay 音频是否自动播放(兼容性差，例如火狐不自动播放)

除了通过src实现之外，还可以通过source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持，所以要输出提示，原理是：进入标签，如果匹配到source,那么浏览器会自动忽略内部其他代码，实现选择，IE8不认识source所以会自动忽略所有source标签，于是只找到提示信息，自动不全p标签，输出提示

对不起你的浏览器不支持播放音频，请升级浏览器

视频标签是video，同理:

8. 表格
标签

属性

colspan：横向合并的单元格
rowspan：纵向合并的单元格

(1) 长表格
标签

日期收入支出合计
(2) 表格的样式

(3) 表单的简介

现实生活中用来提交数据，网页中也可以使用表单，用来将数据提交给服务器。

标签

属性

type 类型

autocapitalize 自动补全

readonly 设置为只读模式，只读数据会提交

disable 将表单项设置为禁用，数据不会提交

autofocus 设置表单项自动获取焦点

欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/zaji/5694570.html

[java-web]-HTML笔记

发表评论

评论列表（0条）