admin管理员组

文章数量:1655976

1.什么是HTML？

HTML全称为超文本标记语言。它包括一系列标签，通过这些标签可以将网络中文档的格式统一。

2.什么是CSS？

层叠样式表。是一种用来表现HTML或XML的计算机语言，是标准的样式语言。

3.快捷键

后退：ctrl+z

前进：ctrl+y

从头选中一行：shift+end

从尾选中一行：shift:home

快速复制一行：alt+shift+↑或↓

快速移动一行：alt+↑或↓

4.web前端的三大核心技术

HTML：结构

CSS：样式

Javascript：行为

5.HTML基本结构和属性？

HTML：超文本 标记 语言

超文本：文本内容+非文本内容（图片、视频、音频）

标记：<单词>

语言：编程语言

标记也叫做标签：

<header>

<footer>

写法分成两种：

单标签 <header>

双标签<header></header>

创建标签的快捷键：单词+tab键-> <单词>

6.初始代码

每个.HTML文件都有的代码叫做初始代码，要符合HTML的规范写法

!+tab键：快速的创建HTML的初始代码

<!DOCTYPE html> <!--文档声明：告诉浏览器这是一个HTML文件-->

<html lang="en" xmlns="http://www.w3/1999/xhtml"><!--包裹着所有HTML标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站-->
<head>
    <meta charset="utf-8" /><!--元信息：是编写网页中的一些赋值信息-->
    <title>这是一个标题</title><!--设置网页的标题-->
</head>
<body>
   正文<!--显示网页内容的区域-->
</body>
</html>

8.HTML注释

写法：<!--注释的内容-->  在浏览器中看不到，只能在代码中看到注释的内容。

意义：

1.把暂时不用的代码注释起来，方便以后使用。

2.对开发人员进行提示。

快捷添加注释与删除注释：

        1.ctrl+/

        2.shift+alt+a

9.标题与段落

标题-> 双标签：<h1></h1> ... <h6></h6>

在一个网页中，h1标题最重要，并且一个.HTML文件中只能出现一次h1标签。

h5、h6标签在网页中不经常使用。

10.文本修饰标签

标签的属性：来修饰标签的，设置当前标签的一些功能。

<标签 属性=“值” 属性2=“值2”

HTML常见标签：https://blog.csdn/zonxxx/article/details/107696507

        1.<strong></strong> 加粗

        2.<em></em> 斜体

        3.<sup></sup>上标  <sub></sub>下标

        4.删除文本：<del></del> 

插入文本：<ins></ins>

例：

 结果：

练习：

<body>
    <p>北京著名的高档百货店——<em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示<strong>"如果手里有购物卡请尽快到店消费"。</strong>据这位服务人员介绍，目前赛特购物中心正在进行清仓大甩卖。<del>特价电视原价3600元，</del><ins>现清仓价只需1300。</ins></p>
</body>

 

11.图片标签 

img->单标签

        src:引入图片的地址

        alt:当图片出现问题的时候，可以显示一段友好的提示文字

        title:（当鼠标移到到图片上时）出现提示信息

        width、height

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <img src="郝梓1.jpg" height="300" width="400" alt="这是图片哦" title="图片哦"/>
</body>
</html>

12.路径的引入

1.相对路径
        .在路径中表示当前路径（同一级文件夹下）

        ..在路径中表示上一级路径（上一级文件夹下）

（在HTML文件与图片等相对路径不变时 图片可以正常显示）（建议使用）

2.绝对路径

如：D：/User/XFC/001

13.链接标签

1.<a>标签

href属性：链接的地址（在原网页基础上打开）

target属性：可以改变链接打开的方式，默认情况下：

在当前页面打开：_self

新窗口打开：_blank

2.<base>标签

练习：https://blog.csdn/qq_64131715/article/details/125426375?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125426375%22%2C%22source%22%3A%22qq_64131715%22%7D&ctrtid=0X94w

14.跳转描点

实现一

        #号

        ID属性

实现二

        #号

        name属性

区别：id跳转是导到头部，name是导到尾部。

练习：

https://mp.csdn/mp_blog/creation/editor/125431419

15.特殊符号

16.定义标签

1.无序列表 -> ul li 符合嵌套的规范

2.有序列表-> ol li 用的较少，可以用无序列表来实现

练习：

https://mp.csdn/mp_blog/creation/success/125431937

3.定义列表

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
        <dl>
            <dt>HTML</dt>
            <dd>超文本样式语言</dd>
        </dl>
        <dl>
            <dt>CSS</dt>
            <dd>层叠样式表</dd>
        </dl>
        <dl>
        <dt>JavaScript</dt>
        <dd>网络脚本语言</dd>
        </dl>
</body>
</html>

4.嵌套列表

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <ul>
        <li>
            吉林省
            <ul>
        <li>长春市</li>
        <li>吉林市</li>
        <li>通化市</li>
                </ul>
        <li>
            新疆省
            <ul>
                <li>乌鲁木齐市</li>
                <li>昌吉市</li>
                <li>塔城市</li>
            </ul>
        </li>
        </ul>
</body>
</html>

17.表格标签

无边框：

<table>下

        <th>横向写

        <td>纵向写

有边框：

<table border="1">

参考：《九宫格火锅》

<table border="1" cellpadding="30">
        <tr>
            <th>日期</th>
            <th>日期</th>
            <th>天气预报</th>
            <th>出行提醒</th>
        </tr>
        <tr>
            <td>2020.12.18</td>
            <th>白天</th>
            <td>晴</td>
            <td>适合出行d>
        </tr>
        <tr>
            <td>2021.8.15</td>
            <td>白天</td>
            <td>小雨</td>
            <td>记得带伞d>
        </tr>
    </table>

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

rowspan:合并行

colspan:合并列

align：左右对齐方式（left center right）

valign：上下对齐方式（top middle bottom）

<body>
    <table border="1" cellpadding="30" cellspacing="20">
        <tr align="right">
            <th colspan="2">日期</th>
            <th>天气预报</th>
            <th>出行提醒</th>
        </tr>
        <tr>
            <td rowspan="2">2020.12.18</td>
            <td>白天</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>黑夜</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2021.8.15</td>
            <td>白天</td>
            <td>小雨</td>
            <td>记得带伞</td>
        </tr>
        <tr>
            <td>黑夜</td>
            <td>小雨</td>
            <td>记得带伞</td>
        </tr>
    </table>

例：

 18.表单input标签

1.输入框：(input type="text")

密码框：password

复选框：checkbox

单选框：radio（单选+  name="自定义1"）

上传文件：file

提交：submit

重置：reset

提交到：<form action="网址">

 <form action="https://blog.csdn/qq_64131715?type=blog">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入您的账号"/>
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入您的密码"/>
        <h2>复选框：</h2>
        <input type="checkbox" />苹果
        <input type="checkbox" />西瓜
        <!--disabled禁止使用-->
        <input type="checkbox" disabled />葡萄
        <h2>单选框</h2>
        <input type="radio" name="hzy" />男
        <input type="radio" name="hzy" />女
        <h2>上传文件</h2>
        <input type="file" />
        <h2>提交按钮和重置按钮</h2>
        <input type="submit" />
        <input type="reset" />

    </form>

 2.下拉菜单

 <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select size="3">
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select multiple>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

例：

3.表单全选中

<input type="radio" name="hzy" id="girl" /><label for="girl">女</label>
        <input type="radio" name="hzy" id="boy" /><label for="boy">男</label>

 练习：表单练习

4.div和span

  <div>
       <h2><a href="http://www.mobiletrain/"><span style="color:red">html</span>IT培训班_千锋教育IT培训机构良心品牌</a></h2>
       <a href="http://www.mobiletrain/"><img src="https://t8.baidu/it/u=2182187197,2108985776&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=81B24C32D405D10306C3B4C70300A0EB&sec=1657645200&t=c2ea0139e338355975d3b3d0643d802b" /></a><p>【千锋教育-国内IT培训机构良心品牌】专注IT教育培训,IT培训主要包括Java培训、Web前端培训、Python培训、Linux培训、UI培训、大数据培训、unity游戏开发培训、软件测试培训、网络安全培训、嵌入...</p>
       <a href="http://www.mobiletrain/">千锋教育</a> 
       <select>
           <option>收藏</option>
           <option>举报</option>

       </select>

19.div和span

div：做一个区域划分的块

span：对文字进行修饰的内联

20.CSS基础语法

一.选择器{属性1：值1；属性2：值2}

width：宽

height：高

background-color：背景色

二.长度单位：

        1.px->像素

        2.%->百分比

                外容器1-> 600px 当前容器 50% ->300px

                外容器2-> 600px 当前容器 50% ->300px

21.CSS样式的引入方式

1.内联样式

        style属性

2.内部样式

        style标签

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style>
    div {
        background-color: aquamarine;
        width: 25%;
    }
    p {
        background-color: aqua;
        width: 50%;
    }
    span{
        width:190px;
        height:190px;
        background-color:deepskyblue;
    }
</style>
<body>
    <div>我只是一只什么也不知道的小柴柴</div>
    <p>嘎嘎柴</p>
    <span>就这样吧</span>
 </body>
</html>

3.外部样式

引入一个单独的CSS文件

HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="./HTMLPage1.css" rel="stylesheet" />
    <title></title>
</head>

<body>
    <div> </div>
    <p> </p>
 </body>
</html>

CSS:

div{
    background-color:red;width:100px;height:100px;
}
p{
    background-color:blue;width:200px;height:150px;
}

本文标签： 基础html

版权声明：本文标题：HTML基础 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729717603a1211021.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。