[java-web]-HTML笔记

记录尚硅谷HTML+CSS笔记

文章目录

- 一、HTML基础

一、HTML基础

1. 网页的结构

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

<html>
<head>
    元数据，给浏览器搜索引擎看的
</head>
<body>
    想要被看到的内容
</body>
</html>

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

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

<h1>这是我的<font color="Red">第三个</font>网页</h1>

属性之间用空格隔开

网页的基本结构

<!doctype html>   html5声明
<html>
    <head>
        <meta charset="utf-8">
        字符集应该与编辑器的一致
    </head>
    <body>
    </body>
</html>

迭代版本：HTML4，XHTML2.0、HTML5…

文档声明（doctype）:文档声明告诉浏览器网页的版本<doctype html>

乱码问题：编码解码字符集不一致，通过<meta charset = "">可以解决

<html lang="en"> 告诉浏览器你写的是英文网站，到时候会弹出是否翻译，中文则为<html lang="zh">

2. html中的“实体”

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

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

3. meta标签

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

属性：

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

4. 语义化标签

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

标题标签

<h1>：是最重要的仅次于title，一般只有一个h1 (一般只用到h1到h3)

<p>：标签，表示一个段落，也是一个块元素

<hgroup>：标签：将h标题分组

<em>：是语音语调的加重，是一个行内元素

<strong>：表示强调

<blockqueue>：表示一个长引用

<q>：表示一个短引用

<br> ：换行

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>123</p>
<p>456</p>
<hgroup>
	<h1>回乡偶书</h1>
 	<h2>其一</h2>
</hgroup>
<p>今天天气<em>真</em>不错</p>
<p>你今天必须要<strong>完成作业</strong></p>
鲁迅说：	
<blockquote>我是从来没有说过的</blockquote>
子曰<q>学而时习之</q>
<br>
<br>
<br>
今天天气真不错
<!-- 块元素：主要对元素进行布局 行内元素：用来包裹文字，一般是块内放行内-->

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

结构化语义标签
- <header>: 网页头部
- <main>: 网页的主体部分(只有一个)
- <footer>: 网页底部
- <nav>: 网页的导航
- <aside>: 侧注释，与主体相关的其他内容
- <article>: 独立的文章
- <section>: 其他的独立区块
结构化无意义标签
- <div>: 没有语义。表示一个独立区块
- <span>: 行内元素，没有语义。用来选中元素

5. 列表

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

<!--列表可以相互嵌套-->
<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

<dl>
    <dt>结构</dt>
    <dd>解释解释解释解释</dd>
    <dd>解释解释解释解释</dd>
    <dd>解释解释解释解释4</dd>
</dl>

<ul>
    <li>
        <ol>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ol>
    </li>
    <li>表现</li>
    <li>行为</li>
</ul>

4. 超链接

作用：超链接让页面跳转到另一个位置或者其他页面
实现用<a>定义超链接
<a>是一个行内元素可以嵌套除他自身以外块的元素
<a>标签的属性：

href:目标跳转路径

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

target属性，可选值

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

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

5. 图片

作用：

<img>标签用于引入图片
定义：

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

<img> 属于替换元素，属于行内元素和替换元素之间的一种元素，即<img>这段代码被具体的东西给替换了
属性：
- src 属性指定的外部路劲
- alt 对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过alt来搜索图片
- width 指定图片的宽度(单位是像素)
- height 指定图片的高度(单位是像素)
注意：

如果只修改了一个，图片会被等比例缩放，如果指定了两个图片就不会等比例变化
一般在PC端不建议修改图片的大小，为了节省网络资源，最好直接在做图的时候改好,但是在移动端经常会把图片缩小
图片的格式：
- jpg(jpeg)
  颜色多，不支持透明，不支持动图
  一般用于显示照片
- gif
  支持的颜色少，支持简单透明，支持动图
  颜色单一的动图
- png
  颜色丰富，支持透明，不支持动图
  颜色丰富，复杂透明(转为网页而生)
- webp
  谷歌新推出的，专业用于网络的格式
  具有其他图片格式的优点，文件特别小
  兼容性不好(例如IE)
- base64
  使用base64进行编码，这样可以直接把图片转化为字符，通过字符格式引入
  一般都是需要与网页一起加载的图片
```


<img src="./img/img/1.gif" alt="" width=100px>
<img src="./img/img/5.gif" alt="松鼠">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1763336060,2397 496866&fm=26&gp=0.jpg" alt="">
<img src="data:image/jpeg;base64...code...">
```

6. 内联框架

作用：

<iframe>内联框架，用于向当前页面中引入其他页面
属性：
- src 指定要引入的网页路径
- frameborder 只有0/1 就是显示与不显示边框
内联框架是把一个网页做为窗口引入现在的网页，注意的是内联框架的内容不会被搜索框架所索引

代码：

<iframe src="https://www.qq.com" frameborder="0" width=800 height=400></iframe>

7. 音视频

定义：

<audio>向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户操作的
属性：
- controls 只有键没有值是否允许用户控制播放
- autoplay 音频是否自动播放(兼容性差，例如火狐不自动播放)
```
<audio src="./source/audio.mp3" controls autoplay></audio>
```
除了通过src实现之外，还可以通过source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持，所以要输出提示，原理是：进入<audio>标签，如果匹配到source,那么浏览器会自动忽略内部其他代码，实现选择，IE8不认识source所以会自动忽略所有source标签，于是只找到提示信息，自动不全p标签，输出提示
```
<audio controls>
 对不起你的浏览器不支持播放音频，请升级浏览器
	<source src="./source/audio.mp3">
	<source src="./source/audio.ogg">
	<embed src="./source/audio.mp3" type="">
</audio>
```

视频标签是video，同理:

	<video src="./source/flower.mp4" controls></video>
	<video controls>
    	<source src="./source/flower.webm">
    	<source src="./source/flower.mp4">
    	<embed src="./source/flower.mp4" type="">
	</video>

8. 表格

标签

	<table>
	<!--tr表示表格中的一行，有几个tr就是几行-->
  	<tr>
    	<!--td表示一个单元格，有几个td就有几个单元格-->
    	<td></td> 
 	 </tr>
	</table>

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

(1) 长表格

标签

<!-- 可以将一个表格拆成三部分 头部 主题 底部 th表示单元格的头部 -->
<table>
    <thead>
        <tr>
            <td>日期</td>
            <td>收入</td>
            <td>支出</td>
            <td>合计</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

(2) 表格的样式

<style> table{
       width:50%; border: 1px solid black; /*指定边框之间的距离*/ /*border-spacing: 0px;*/ /*设置边框的合并*/ border-collapse: collapse ; } td{
       border:1px solid black; height: 100px; /*默认情况下，元素在td中是垂直居中的，可以通过 vertical -algin设置*/ vertical-align: middle; text-align: center; } /*使用后代元素选择器，变行变颜色*/ /* 如果以表格里头没使用tbody，浏览器会将tr全部放入tbody中 tr不是table的子元素 无法通过 table>tr 子类选中tr */ table > tr:nth-child(odd){
       background-color: #bfa; } .box1{
       background-color: #e0fc2b; width: 400px; height: 400px; /*将元素设置为单元格，就可以使用td的属性*/ display: table-cell; vertical-align: middle; } .box2{
       width: 100px; height: 100px; background-color: #497194; margin: 0 auto; } </style>

(3) 表单的简介

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

<form>
属性

type 类型

autocapitalize 自动补全

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

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

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