HTML入门01

最新推荐文章于 2024-07-08 16:01:05 发布

cuishoulong3424

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量102

点赞数

文章标签： html css html5 es6

本文链接：https://blog.csdn.net/cuishoulong3424/article/details/109777074

版权

文章目录

写一个页面所需要的语言

HTML：超文本标记语言（骨架）
CSS：层叠样式表（衣服）
javascript：（行为和动态）

标签的特点：

关键词（标签）由<括起来
一般都是成对出现（开始标签，结束标签）
结束标签比开始标签多了一个/

还有一类比较特殊的，是单个出现的，比如img，meta就叫做单标签（自闭合标签/空标签）

标签的属性

对标签的描述，可以代表一定功能和特征，通常放在关键词的后面。
属性有内置属性和自定义属性
属性可以有多个，属性和属性之间要用空格隔开
属性名和属性值合起来就是键值对

src就是属性名，网址就是属性值
alt也是属性名，1就是属性值

<img src="fruit (24).jpg" alt="1">

HTML基本结构

<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="zh-CN">
    <!-- html也可以叫根元素 -->
    <!-- en是英文网站，zh-CN是中文网站 -->
<head>
    <meta charset="UTF-8">
    <!-- utf-8是万国码，作用：防止乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">
    <!-- keywords是关键字，description是描述,content是内容 -->
    <title>2</title>
    <!-- 网页标题 -->
</head>
<body>
    <h1>a1</h1>
    <h2>a2</h2>
    <h3>a3</h3>
    <h4>a4</h4>
    <h5>a5</h5>
    <h6>a6</h6>
    <!-- h是文档标题，一般一个页面只有一个h1，常用于logo，h有六个 -->
    <p>7777</p>
    <!-- 段落标签p -->
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <!-- a超链接，href是URL，target控制是否本页打开 -->
    <img src="fruit (24).jpg" alt="1" title="555">
    <!-- img图片，alt是图片加载失败时显示，或者可以用于有声阅读，title是鼠标悬浮时显示 -->
    <audio src="qt.mp3" controls></audio>
    <video src="212.mp4" controls></video>
    <!-- audio是音乐，video是视频，controls是提供的播放控件 -->
</body>
</html>

快速生成一个html文档

先建一个后缀名为.html或.htm的文档
调成英文输入法，shift+!+回车

    <!-- div{京东秒杀}*4 -->
    <div id="a1">京东秒杀</div>
    <div id="a2">特色优选</div>
    <div id="a3">频道广场</div>
    <div id="a4">为你推荐</div>

    <a href="#a1">京东秒杀</a>
    <a href="#a2">特色优选</a>
    <a href="#a3">频道广场</a>
    <a href="#a4">为你推荐</a>
    <a href="#">回到顶部</a>

target="_blank"(在新的窗口打开)
- _self（在当前列表打开）
默认为_self

    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="http://www.baidu.com" target="_self">百度</a>
    <a href="http://www.baidu.com">百度</a>

5)音频标签

视频：video 音乐：audio
属性：controls(提供控制台)
- autoplay（自动播放）
- loop（单曲循环）

    <audio src="qt.mp3" autoplay></audio>
    <audio src="qt.mp3" controls></audio>
    <audio src="qt.mp3" loop></audio>

    <video src="212.mp4" controls></video>
    <video src="212.mp4" autoplay></video>
    <video src="212.mp4" loop></video>
    <!-- controls提供控制台  autoplay自动播放 loop循环播放 -->

字符实体

特殊字符如空格可以使用
网址：https://www.w3school.com.cn/html/html_entities.asp
实体编号没有兼容问题

补充的标签

div：划分大区域的，大盒子标签
span：小盒子标签
格式化标签：
- 加粗：b/strong
- 斜体：i/em
- 删除线：s/del
- 下划线：u/ins
预格式化标签：
- pre
  - 作用：会按照预先设置好的格式，在浏览中显示

    <b>加粗1</b>
    <strong>加粗2</strong>
    <!-- b/strong加粗 -->
    <i>斜体1</i>
    <em>斜体2</em>
    <!-- i/em斜体 -->
    <del>删除线1</del>
    <s>删除线2</s>
    <!-- del/s删除线 -->
    <u>下划线1</u>
    <ins>下划线2</ins>
    <!-- u/ins下划线 -->

面试题

加粗，斜体,删除线，下划线。他们有什么区别？
加粗：b/strong
斜体：i/em
删除线：s/del
下划线：u/ins

strong（em/del/ins）比b(i/s/u)语气更加强烈，更利于搜索引擎优化，重要性更高一些

css引入有几种方式？link和@import的区别？

4种，分别为行内式，内嵌式，外链式，导入式。link是在页面加载时同时加载@import是在框架加载完以后加载

快捷键

格式化代码：shift+alt+F
填充html框架：shift+!
注释：ctrl+/
多行注释：shift+alt+A

三大列表

有序列表ol
无序列表ul
- 两个里面都是li
- li外面不能写东西，这是规范

    <ol>
        <li>
            <a href="javascript:;">上班</a>
        </li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol>
    <!-- ol有序列表 ul无序列表-->
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul>

自定义列表dl
- dt是标题头
- dd是列表
  - dd会比dt缩进一格

    <!-- dl自定义列表,dt是标题，dd是列表 -->
    <dl>
        <dt>早餐</dt>
            <dd>豆浆</dd>
            <dd>鸡蛋</dd>
            <dd>油条</dd>
        <dt>午餐</dt>
            <dd>面</dd>
            <dd>煎蛋</dd>
            <dd>鸡腿</dd>
        <dt>晚餐</dt>
            <dd>牛奶</dd>
            <dd>苹果</dd>
            <dd>香蕉</dd>
    </dl>

注意：以上的都是固定格式：ul和ol里面紧邻的子元素，必须是li，如果想要嵌套其他的元素可以放到li的里面，dl里面紧邻着的一定是dt和dd，如果想要嵌套，可以放到dt和dd里面

CSS的4种引入方式

行内式
- 写在标签上的样式

    <div style="
    color: cadetblue;
    background-color: cornflowerblue;
     height: 500px;
     ">
     行内式</div>

内嵌式
- 在head内打一个style标签，在style里面写样式

    <style>
        div {
            color: cadetblue;
            background-color: cornflowerblue;
            height: 500px;
        }
    </style>

外链式

新建一个css后缀名的文件，然后在html中导入

<link rel="stylesheet" href="index.css">

导入式

新建一个css后缀文件，然后在HTML中创建style标签，在里面输入@import url(""),""内输入导入的样式文件名

    <style>
        @import url("15导入式.css");
    </style>

cuishoulong3424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门01

文章目录写一个页面所需要的语言标签的特点：标签的属性HTML基本结构快速生成一个html文档标签字符实体补充的标签面试题快捷键三大列表CSS的4种引入方式写一个页面所需要的语言HTML：超文本标记语言（骨架）CSS：层叠样式表（衣服）javascript：（行为和动态）标签的特点：关键词（标签）由<括起来一般都是成对出现（开始标签，结束标签）结束标签比开始标签多了一个/还有一类比较特殊的，是单个出现的，比如img，meta就叫做单标签（自闭合标签/空标签）标签的属性
复制链接

扫一扫