HTML&CSS基础知识笔记

HTML
- 一、HTML介绍
- 二、实体
- 三、meta标签
- 四、语义化标签（一）
- 五、语义化标签（二）
- 六、语义化标签（三）
- 七、列表
- 八、超链接
- 九、图片标签
- 十、内联框架
- 十一、音视频
- 十二、表格
- 十三、表单

HTML

HTML(Hyper Text Markup Language)超文本标记语言

一、HTML介绍

网页的基本结构：

<html><head><meta><title></title></head><body></body>
</html>

html 定义整个HTML文档
head 标签是网页的头部，head内容不会在网页中出现，主要用来帮助浏览器或搜索引擎来解析网页
meta 标签用来设置网页的字符集，避免乱码问题，用来设置网页的元数据
title标签必须写！
迭代
- 网页的版本
  - HTML4
  - XTML2.0
  - HTML5
  - …
- 文档的声明
  - 文档的声明是用来告诉浏览器当前网页的版本
  - HTML5的文档声明：
    <!doctype html>
进制
- 十进制
- 二进制
  所有数据在计算机底层都是以二进制形式存储的
- 八进制
- 十六进制
字符编码
- 解码
  将字符转换为二进制码的过程
- 编码
  将二进制码转换为字符的过程
- 字符集(charset)
  编码和解码所采用的规则
- 乱码问题
  如果编码和解码所采用的字符集不同会造成乱码问题
- 常见的字符集
  - ASCII
  - ISO88591
  - GB2312
  - GBK
  - UTF-8
- 可以使用meta标签来设置网页的字符集，避免乱码问题：

二、实体

实体的语法：&实体名字;

&nbsp；空格
&gt；大于号
&lt；小于号
&copy；版权符号
…

三、meta标签

meta主要用来设置网页中的一些元数据，元数据是非浏览器看的

charset 指定网页的字符集

name 指定数据的名称

keyword 表示网站的关键字，可以同时指定多个关键字，关键字用 , 隔开

description 用于指定网站的描述

<meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡">
<meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!">

http-equiv 将页面重定向到另一个网站
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
content 指定数据的内容

四、语义化标签（一）

在网页中HTML负责网页的结构，使用HTML应该关注标签的语义，而不是样式

标题标签
- h1 - h6 一共有六级标题，重要度递减
- h1在网页中重要性仅次于title标签，一般标题标签只使用到h3
- hgroup标签用来为标题分组，可以将一组相关的标题放到hgroup里
- p标签表示页面中的一个段落，是块元素
- em标签用于表示语音语调的加重，在页面中不会独占一行，是行内元素(inline element)
- blockquote表示长引用，是块元素
- q表示短引用，是行内元素

五、语义化标签（二）

块元素
在网页中一般通过块元素来对页面进行布局，
行内元素
行内元素主要用来包裹文字
一般情况下，在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能做
p元素中不能放任何块元素
浏览器在解析网页，会自动对网页中不符合规范的内容进行修正：
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- html中出现了head和body以外的子元素

六、语义化标签（三）

布局标签（结构化语义标签）

header 表示网页的头部
main 表示网页的主体部分（一个网页只有一个）
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示使用section
div 没有语义，就用来表示一个区块，目前来讲div还是主要的布局元素
span 行内元素，没有任何语义，用于在网页中选中文字

七、列表

列表（list）
在HTML中也可以创建列表，HTML列表一共有三种

有序列表
- 使用ol标签来创建有序列表
- 使用li标签表示列表项
无序列表
- 使用ul标签来创建无序列表
- 使用li标签表示列表项
定义列表
- 使用dl标签来创建定义列表
- 使用dt标签来表示定义的内容
- 使用dd标签来对内容进行解释说明
```
<dl><dt></dt><dd></dd>
</dl>
```

列表之间可以互相嵌套

八、超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置

使用a标签来定义超链接，属性：
- href 指定跳转的目标路径，值可以写一个外部网站的地址，也可以写内部页面的地址
  - 可以直接将href属性设置为#，这样点击超链接后，页面不会发生跳转，而是转到当前页面的顶部位置
  - 还可以跳转到页面的指定位置，只需将href属性设置为#目标元素的id值
- a标签是一个行内元素，在a标签中可以嵌套除它自身的任何元素
- target 用来指定超链接打开的位置，可选值：
  - _self 默认值，在当前页面中打开超链接
  - _blank 在一个新的页面中打开超链接
- id （唯一不重复）
  - 每一个标签都可添加id属性
  - id属性是元素的唯一标识，同一个页面中不能出现重复的id属性值

九、图片标签

图片标签用于当前页面中引入一个外部图片
使用img标签来引入外部托，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素，具有两种元素的特点）

属性：

src 属性指定的是外部图片的路径（路径规则和超链接一样）
alt属性对图片的描述，默认情况下不显示，有些浏览器会在图片无法加载时显示
width图片的宽度（定位是像素）
height图片的高度
注意：一般情况下在pc端，不建议修改图片的大小。在移动端，经常需要对图片进行缩放（大->小）

图片的格式：

JPEG（JPG）
- 支持颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
GIF
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片、动图
PNG
- 支持颜色丰富，支持复杂透明，不支持动图
- 颜色吩咐、复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件比较小
- 缺点：兼容性不好
base64
- 将图片使用base64进行编码，可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才使用base64

十、内联框架

内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径

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

十一、音视频

audio标签向页面中引入一个外部的音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止
属性：

src 指定外部文件的路径
controls 是否允许用户控制播放，没有值
autoplay 音频文件是否自动播放
loop 音乐是否循环播放
处了使用src来指定外部文件的路径外，还可以使用source来指定文件的路径

    <audio controls><source src="./source/#.mp3"><source src=.source/#.ogg""><embed src="./source/#.mp3" type="audio/mp3"         width="200" height="100" >   </audio>

video标签来向网页引入一个个视频，使用方法和audio一样

十二、表格

1、在网页中我们需要使用表格

table标签来创建一个表格
tr标签来表示行
td标签表示单元格
rowspan 纵向合并单元格，合并行
colspan横向合并单元格，合并列

2、还可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot
th表示头部的单元格

<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot>
</table>

3、表格的样式：

border-spacing 指定边框之间的距离
border-collapse 设置边框的合并
单元格 td
- vertical-align 垂直样式
- text-align 水平样式
如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个个tbody，并且将tr全部放到tbody中
tr 不是 table 的子元素

十三、表单

网页中的表单用于将本地的数据提交给远程的服务器

     <!-- form 的属性：action 表单提交的服务器的地址autocomplete="off" 关闭自动补全 --><form action="target.html"><!-- 文本框 注意：数据要提交到服务器中，必须要为元素指定一个name值readonly 将表单项设置为只读  数据会提交disabled 将表单项设置为禁用  数据不会提交autofocus 设置表单项自动获取焦点-->账号：<input type="text" name="username"><br><!-- 密码框 -->密码：<input type="password" name="password"><br><!-- 单选按钮像这种选择按钮，必须指定一个value属性，value值会最终作为用户填写的信息交给服务器处理checked可以将单选框设置为默认选中-->单选按钮 <input type="radio" name="hello" value="a"><input type="radio" name="hello" value="b" checked><br><!-- 多选框 -->多选框 <input type="checkbox" name="text" value="1"><input type="checkbox" name="text" value="2"><input type="checkbox" name="text" value="3" checked><br><!-- 下拉列表 --><select name="chose"><option value="i">选项一</option><option selected value="ii">选项二</option><option value="iii">选项三</option></select><br><!-- 提交按钮 --><input type="submit" value="登录"></form>

HTML基础知识笔记（0基础入门）相关推荐

计算机数据库基础知识笔记,计算机基础及技巧(我的电脑笔记,适合新手!包含使用电脑最基本的知识及DOS、网络及数据库等。)...
计算机基本功能 1.判断计算 2.输入输出(含数据存储) |____时钟:键鼠.内存.硬盘.显示 |____网络.打印.移动存储.音响.扫描仪...... 不同数据通过不同总线进入不同寄存器,交由CP ...
b站唐老师人工智能基础知识笔记
b站唐老师人工智能基础知识笔记 0.机器学习(常用科学计算库的使用)基础定位.目标定位 1.机器学习概述 1.1.人工智能概述 1.2.人工智能发展历程 1.3.人工智能主要分支 1.4.机器学习工作 ...
Python基础知识详解从入门到精通（八）魔法方法
目录 Python基础知识详解从入门到精通(八)魔法方法什么是魔法方法基础魔法方法(较为常用) 比较操作符算数运算符反运算(类似于运算方法) 增量赋值运算一元操作符类型转换上下文管理( ...
access2013数据库实验笔记_医学科研实验基础知识笔记（十）：甲基化
往期回顾医学科研实验基础知识笔记(一):细胞增殖医学科研实验基础知识笔记(二):细胞凋亡检测医学科研实验基础知识笔记(三):细胞周期检测医学科研实验基础知识笔记(四):细胞自噬研究策略医学科 ...
Java基础知识笔记-11_2-Swing用户界面组件
Java基础知识笔记-11_2-Swing用户界面组件这章教程两个版本,一个语法是非lambda表达式版本,另一个是lambda表达式版本非lambda表达式版本 1 Java Swing概述 J ...
6-DoF问题相关基础知识笔记
6-DoF问题相关基础知识笔记一.什么是6-DoF,即6个自由度是什么? 二.PnP算法三.BOP挑战与官方数据集简介 BOP数据集 BOP toolkit BOP挑战的介绍页面四.相关论文 C ...
python详细基础知识笔记
详细基础知识笔记注: ·第一章学习准备 1.1高级语言.机器语言.汇编语言 1.2 汇编.解释 1.3 静态语言.脚本语言 1.4 Python的历史 1.5 Python语言的优点.缺点 1.6 ...
Unity3D基础知识笔记
Unity3D基础知识笔记一.Unity简介 1)Unity3D概念 2)Unity3D的特点二.Unity3D的发展历史三.软件安装一.Unity简介 1)Unity3D概念 Unity是由 ...
学习插画前期需要什么基础知识？插画师入门基础先学什么？
学习插画前期需要什么基础知识?插画师入门基础先学什么?零基础到插画师需要学多久?想必这些问题都是初学者比较伤脑筋的问题,那么初学者学习插画前期需要什么基础知识呢?今天小编就在网络上收集整理了关于插画师 ...

HTML基础知识笔记（0基础入门）