HTML&CSS&JavaScript学习（持续更新）

时间：2021-02-10 12:56:07 阅读：0 评论：0 收藏：0 [点我收藏+]

HTML

基本框架

<!doctype html>
<html lang="zh-CN">
	<head>
	<meta charset="utf-8">
		<title>无标题文档</title>
	</head>
	<body>
	</body>
</html>

iframe内联框架

 <iframe src="https://www.bilibili.com" frameborder="0" width="1450" height="1000"></iframe>
 不常用，有缺点

基础

1. 标题（h）

<h1>一级标题</h1>		一般一个网页中只有一个h1标题
<h2>二级标题</h2>

拓展

<!-- 
    hgroup标签用来为标题分组
    将一组相关的标题放入同一组中
 -->
    <hgroup>
        <h1>你好</h1>
        <h2>我是</h2>
    </hgroup>

2. 段落（p）

<p>Hello World!</p>					<!-- 形成一个段落 -->
<br>Hello World!</br>				<!-- 折行，但不形成段落 -->
<blockquote>独占一行的块元素</blockquote>	<!--引用 -->

3. 链接（a）

<a href="https://www.bilibili.com/">这是一个链接</a>

4. 图像（img）

img元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）
alt 图片的描述，默认情况下不会显示，当图片加载失败的时候会显示

但搜索引擎会根据alt中的内容识别图片，如果不写alt属性则不会被搜索引擎收录
title属性可以显示图片或文字的属性

<img title="多多和小小初次购物" src="../图片/图像.jpg" alt="多多and小小" width="200" > 
<!--若只设置width（height），不设置height（width）则会等比例缩放 -->

拓展
1. jepg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图
2. gif：支持的颜色较少，支持简单透明，支持动图
3. png：支持的颜色丰富，支持复杂透明，不支持动图
4. webp：谷歌推出的专门用来表示网页中的图片的一种格式，具备前三种的所有优点，内存小
5. base64：希望图片加载速度快的时候使用，将图片转换成编码的形式，随浏览器加载一起出

5. 注释（）

<!--这是一个注释-->

6. 水平线（hr）

<hr>

属性

body属性

值	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

拓展

title 标签的内容会作为浏览器搜索结果的超链接上的文字

a 标签的属性

target 属性

<a target="value">

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

type 属性

<a type="value">

属性	描述
MIME type	规定被链接文档的的 MIME 类型。

hreflang 属性

<a hreflang="value">
<a href="https://www.bilibili.com" hreflang="zh">B站</a>

name 与 id 属性

name（id）可传送至锚处

<a name="top">top</a>					<!--锚-->
<a href="#top">去top</a>					<!-- 传送 -->

拓展

可在打开新网页的时候定位到锚处

<a href="http://127.0.0.1:5500/basic.html#foot">访问到foot处</a>

head 属性

标签	描述
head	定义了文档的信息
title	定义了文档的标题
base	定义了页面链接标签的默认链接地址
link	定义了一个文档和外部资源之间的关系
meta	定义了HTML文档中
script	定义了客户端的脚本文件
style	定义了HTML文档的样式文件

<meta charset="UTF-8" name="keywords" content="HTML,学习,小小,多多">
<meta charset="UTF-8" name="description" content="HTML,学习,小小,多多">

字体（font）

1. 颜色

<font style="color: brown;">Hello World!</font>

2. 大小

<font style="font-size: 20px;">Hello World!</font> 
<p style="font-size: 20px;">Hello World!</p>

3. 类型

<p style="font-family:华文彩云;">你好世界！</p>
<font style="font-family:华文彩云;">Hello World!</font>

文本格式化

1. 文本格式化标签

<b>Hello World!</b>                                         <!-- 加粗文本 -->
<em>Hello World!</em>                                       <!-- 定义着重文字 -->
<i>Hello World!</i>                                         <!-- 斜体 -->
<strong>Hello World!</strong>							 <!-- 强化语气 -->
<blockquote>独占一行的块元素</blockquote>

列表

列表之间可以互相嵌套

属性	描述
ul	无序列表（用的最多）
ol	有序列表
dl	定义列表

<dl>
         <dt>HTML</dt>			<!--dt定义名，dd定义的内容-->
            <dd>HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．
             通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
             HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
            </dd>
     </dl>

音频（audio）和视频（video）

1. 音频

controls：允许用户控制
autoplay：自动播放
loop：循环播放

<audio src="" controls autoplay loop></audio>

拓展

<!-- 可用来播放音频失败时提示用户升级浏览器 
    <audio controls>
        对不起，你的浏览器不支持播放音频，请升级浏览器
        <source src="./音频/双笙_封茗囧菌-霜雪千年.mp3"> 
    </audio>
-->

<embed src="./音频/双笙_封茗囧菌-霜雪千年.mp3" type="audio/mp3" width="300">
<!--	embed所有浏览器都支持，但版本很旧-->

2. 视频

方法和audio基本一致

<audio controls>
    对不起，你的浏览器不支持播放视频，请升级浏览器
    <source src="./"> 
</audio>

<embed src="./" type="audio/mp4" width="300">

// embed所有浏览器都支持，但版本很旧

3. 注意示项

一般不会引入本地视频

注意事项

如果需要书写特殊符号，则需要用Html中的实体（转义字符）

&实体的名字

显示结果	实体名称	描述
	&nbsp	空格
<	&lt	小于号
>	&gt	大于号
&	&amp	和号
"	&quot	引号
`	&apos	撇号
￠	&cent	分（cent）
￡	&pound	镑（pound）
￥	&yen	元（yen）
€	&euro	欧元（euro）
§	&sect	小节
?	&copy	版权（copyright）
?	&reg	注册商标
?	&trade	商标
×	&times	乘号
÷	&divide	除号

CSS

基本框架

1. 内联（行内）样式

直接在HTML语句中定义

<p style="color: red; font-size: 30px;">命数入织，当为磐石</p>

缺点

样式只能对一个标签生效
对多个元素生效时，需每一个都定义一次
修改样式麻烦，需一个一个修改，不方便

2. 在head中的style定义

在CSS选择器中定义样式

<style>
        p{
            color: red;
            font-size: 30px;
        }
</style>

优点
1. 可同时为多个标签定义样式，修改时只需修改一处即可应用全部
缺点
1. 但只能对当前的一个网页有效，不能跨界面复用

3. 外部样式表

定义一个.css文件
然后用link语法链接

<link rel="stylesheet" href="./样式表.css">

常用选择器

id 与 class

定义：根据元素的id属性值选中一个元素
语法：#red{}
注意：最好不要重复使用，id属于唯一值

<style>	
	#gray{
            color: gray;
     }
</style>
</head>
<body>
    <h1>静夜思</h1>
    <p>床前明月光</p>
    <p>疑似地上霜</p>
    <p>举头望明月</p>
    <p id="gray">低头思故乡</p>

class

定义：与id相似，但可以重复使用
语法：.blue{}
class可以为元素分组
一个元素可以指定多个class元素,class之间用空格间开

<style>	
	#gray{
            color: gray;
     }
    .blue{
            color: blue;
	}
    .one{
        font-size: 15px;
    }
</style>
</head>
<body>
    <h1>静夜思</h1>	
    <p class="blue one">床前明月光</p>	<!--指定多个class元素-->
    <p class="blue">疑似地上霜</p>
    <p class="blue">举头望明月</p>
    <p id="gray">低头思故乡</p>

通配选择器

*{
	<!-- 作用于整个CSS -->
}

复合（交集）选择器

定义：同时复合多个条件的元素
语法：h1，h2{}

<style>
       p.two{
           font-size: 30px;
           font-family: "华文彩云";
       }
   </style>
</head>
<body>
       <div class="two">HTML</div>
       <p class="two">CSS</p>

关系选择器

定义
语法
- div>p div.one>p div>p>span p+h4 div~span

<style>
        div>span{                       /*子元素选择器  语法：父元素>子元素
            font-size: 40px;
            font-family:‘宋体‘;
            color: orange;
        }

        div.one>p{                      /*父子选择器结合class标签
            font-size: 30px;
            color: chocolate;
        }

        div>span>p{                     /*父子选择器*/
            font-size: 40px;
            color: teal;
        }
        p + h4{
            font-family: ‘草书‘;        /*兄弟选择器   语法：前一个+后一个	（只选择紧挨着的第一个元素）*/
            color: violet;  
        }
    	div ~ span{					/*兄弟选择器（选择下面所有的兄弟元素）*/
            font-size: 20px;
            color: royalblue;
        }
    </style>
</head>
<body>
    <div>
        <span>
            div内的span
            <p>div>span>p</p>
        </span>  
    </div>
    <div class="one">
        <p>div与class</p>
        <h4>p旁边的h4元素</h4>
    </div>
        <span>div外的span</span>

属性选择器

语法：[属性名] 选择含有指定属性名的元素

? [属性名 = 属性值] 钻则含有指定属性名和属性值的元素

<style>
        p[title]{                   /*[属性名]	选择含有指定属性名的元素*/
            color: tomato;
    }
        p[title = abc]{             /*[属性名 = 属性值]	选择含有指定属性名和属性值的元素*/
            font-family: ‘华文彩云‘;
        }
        p[title ^= abc]{            /*[属性名 ^= 属性值]	选择属性值以指定开头的元素*/
            font-size: 40px;
        }
        p[title $= de]{            /*[属性名 $= 属性值]	选择属性值以指定结尾的元素*/
            font-size: 60px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>静夜思</h1>
    <p title="abc">床前明月光</p>
    <p title="abcde">疑似地上霜</p>
    <p title="fde">举头望明月</p>
    <p id="gray">低头思故乡</p>

注意事项

1. style

style中的语句不支持HTML语句，属于CSS，包括注释

HTML&CSS&JavaScript学习（持续更新）

标签：key parent block red 图像类型使用客户访问

原文地址：https://www.cnblogs.com/duoduo54/p/14392680.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行