初始HTML&CSS

最新推荐文章于 2023-06-26 16:15:19 发布

qq_53446980

最新推荐文章于 2023-06-26 16:15:19 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/qq_53446980/article/details/119619700

版权

初始HTML&CSS-小记

简要概括网页三大要素：
HTML、CSS、JavaScript
结构表现行为
网页搭建框架，用于描述网页的结构
用于表现网页元素的样式，颜色，背景，字体
用于响应用户的操作，动态+事件

一、HTML

1.1.html是一种标记语言，用于浏览器如何构造一个页面。（超文本）

1.2.可以使用html或者htm作为后缀。

1.3.特点：

1）简易性；
2）可扩展性；
3）平台无关性；
4）通用性；

二、CSS

2.1是一种可以用来修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，将文档以更优雅的形式展现

三、html和css的关系

3.1html是网页的内容载体；css样式是表现，例如穿衣打扮化妆一样。

3.2html用于描述页面的表现，css用于控制页面的样式，JavaScript用于响应用户的操作

四、认识html

4.1打开VSCode，新建后缀名为.html的文件，输入"!"或"html:5"生成基本的html5结构

1）lang是language的缩写，en是English的缩写，zh-CN是中文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

4.2 基本语法

1）注释

（ctrl+/）可添加注释，

养成良好习惯，用于给其他开发人员表述代码结构

2)元素

单标签元素：

<img /> <br/>

双标签元素：

div ，p

标签之间可以进行嵌套，建议镜面嵌套，不能交叉嵌套

3）属性

属性应该放在起始标签里面。

核心属性：（几乎所有元素都会有的属性），

title描述信息（鼠标悬停的文字提示）；

<!-- title 鼠标悬停简单介绍 -->
	<div title="我是一个div标签">div1</div>

id 身份证，唯一标识；

class表示一类元素；

style设置样式；

<!-- 标签自带属性写在起始标签里面 -->
	<div id="" style="" class="" title=""></div>

4）其他

常用的字符实体

>  空格  &nbsp;
>  <  &lt;
>  >  &gt;
>  “  &quot;
>  &  &amp;
>  ‘  &apos;

4.3块级元素

常用的块级元素：html，body，div，p，h1-h6，ul/ol-li

宽度默认100%，如果没有父元素的话，宽度相对视图区而言；

如果有父元素，相对父元素而言。高度由子元素及其内容决定。

块级元素可以直接设置宽高。

块级元素可以包含块级元素和行内元素

    <!-- 块级元素 -->
    <!-- 1.独占一行 -->
    <!-- 2.默认宽度为100% -->
    <!-- 3.高度由子元素或内容决定 可以通过css指定其宽度  -->
    <!-- 4.块级元素可以包含块级元素和行内元素 -->
    <div style="border: 1px solid red;height: 30px;">我是一个块级元素</div>
    <div>
        <div>嵌套块级元素</div>
        <span>嵌套行内元素</span>
    </div>

4.4行内元素

元素：span、a、img、strong、b、i、em、sub、sup…

特殊元素：input、img特殊行内，可以直接设置宽高

行内元素只能包含行内元素。

     <!-- 行内元素 的基本使用-->
    <!--1. 与其他行内元素共享一行空间 -->
    <!--2. 行内元素不能嵌套块级元素 -->
    <!-- 3.宽高由自身决定 由于不用来搭建网页结构，所以也无需通过css指定其宽度-->
    <div>
        <span style="border: 1px solid red;height: 50px;">我是一个行内元素span1</span>
        <span>我是一个行内元素span2</span>
    </div>

五、基础标签的使用

5.1 h标题标签

h1，h2, h3比较常用，其中h1最大

5.2 br换行标签

自结束标签<br>

5.3 hr分割线标签

自结束标签<hr>

5.4 p段落标签

p段落标签用于表示内容中的一个自然段

p标签中的文字会独占一行，并且段与段之间有一个间距,有16px的上下margin

 <!--4. 段落标签 -->
    <p>我是一个段落标签</p>

5.5 img标签

img 放图片的元素

src 放图片的路径（一般用相对路径，网页图片下载在本地后使用）

相对路径 ./ …/ or 绝对路径 http：//ip:端口号/项目名/文件名

width：宽

height: 高

title: 鼠标悬停后提示文字

     <!-- img标签的基本使用 -->
    <!-- 使用img自带的height和width属性设置宽高 -->
    <!-- 只需要设置一个宽或高其中的一个属性就可以了 -->
    <!-- alt图片加载失败提示 -->

    <!-- 1.加载本地图片 -->    
    <img src="./image/标签1.png" width="50px" alt="网络过慢，图片加载失败" title="我是一个本地图片标签">
    
    <!-- 2.加载url链接图片 -->
    <img src="https://img0.baidu.com/it/u=119666455,73076852&fm=26&fmt=auto&gp=0.jpg" width="100px" alt="网络过慢，图片加载失败"
        title="我是一个url链接图片标签">

5.6 a标签

href 放跳转路径

相对路径 ./ …/ or 绝对路径 http：//ip:端口号/项目名/文件名

target 跳转页面打开位置

_self 默认，在当前窗口打开

_blank 在新窗口/新的选项卡打开

     <!-- a标签的基本使用 -->
    <!-- 1.加载本地链接文件 -->
    <!--target="_blank"  设置链接跳转方式，_blank是在新的选项卡中加载对应的页面-->
    <a href="./05-img标签.html" target="_self">我是一个a标签</a>
    <!-- 2.加载远程链接或页面 -->
    <!-- 使用img标签当成一个a标签使用，在a标签中插入一个img标签 -->
    <a href="https://www.baidu.com/">
        <img src="./image/标签2.png" alt="">
    </a>
    <!-- 3.mailto链接 -->
    <a href="mailto:80514@qq.com">email</a>

5.7 假链接

什么是假链接？
就是点击之后不需要跳转的链接我们称之为假链接

在企业开发初期，其他的界面都没有完成，所以不知道跳转到什么地方，这个时候先用假链接来代替，项目完成后再换成真链接

假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部

 <!--1.# 直接回到页面的顶部 -->
    <a href="#">回到顶部</a>
    <!-- javascript不会自动回到顶部 -->
    <a href="#javascript">点一下</a>

5.8 锚点

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

2.在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

3.实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

<!-- 2.通过锚点找到对应的id 进行具体位置的跳转 -->
    <a href="#center">回到中部</a>
    <!--3. 通过锚点跳转到其他页面中的特定的一个点 -->
    <a href="04-基础标签.html#somewhere">跳转页面指定位置</a>

5.9 em标签

意为强调，突出文章重点

5.10 strong标签

意为强调，内容更为有用

5.11 标签

加粗

5.12 i标签

斜体

5.13 u标签

下划线

5.14 div标签

div是一个无语义的标签，div元素主要用来进行页面基本结构的搭建

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

5.14 span

span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

六、H5新增标签

video(H5新增)

作用：播放视频
webm 网页中专用的视频格式

格式:<video src=""></video>

video标签的属性
src:告诉video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls:用于告诉video标签是否需要控制条
poster:用于告诉video标签视频没有播放之前显示的占位图片
loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
width/height: 和img标签中的一模一样
video的第二种格式
1.格式:

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

2.第二种格式存在的意义:
没有一种视频格式是所有浏览器都支持的
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 都通过source标签指定给video标签, 可选择一种自己支持的格式来播放

3.注意点:
3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

audio(H5新增)

作用: 播放音频

格式:

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster

七、HTML5新增语义化标签

除语义外，与div相同。新的标签带来的是网页布局的改变及提升对搜索引擎的友好。

7.1 header

<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

7.2 nav

<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

7.3 article

<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

7.4 section

<section>作为Html文档独立的功能。

7.5 aside

<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

7.6 footer

<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

7.7 address

<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要：
section, article, aside, footer, header, nav, hgroup { display:block; }
但是上述方法有局限性，比如在IE8以及更早版本，是无法对未知元素进行样式的修饰，因此需要：图

7.8 figure& figcaption

figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

多用于用作文档中插图的图像。

7.9 details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

7.10 open属性

当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false

7.11 summary子元素

summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

qq_53446980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初始HTML&CSS

初始HTML&CSS-小记简要概括网页三大要素：HTML、CSS、JavaScript结构表现行为网页搭建框架，用于描述网页的结构用于表现网页元素的样式，颜色，背景，字体用于响应用户的操作，动态+事件一、HTML1.1.html是一种标记语言，用于浏览器如何构造一个页面。（超文本）1.2.可以使用html或者htm作为后缀。1.3.特点：1）简易性；2）可扩展性；3）平台无关性；4）通用性；二、CSS2.1是一种可以用来修饰文档（可以是标记语言
复制链接

扫一扫