第一周预习-HTML常用标签及CSS入门

已于 2024-03-23 09:52:09 修改
阅读量914 收藏 27
点赞数 14
文章标签： html css 前端
于 2024-03-19 23:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80078038/article/details/136857250
版权

一、HTML

1.什么是 HTML?

  • HTML 指的是超文本标记语言: HyperText Markup Language(面试被问住啦啊啊啊)
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

2.HTML的结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题（h1-h6）
  • <p> 元素定义一个段落

3.HTML常用标签

1）HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。使用<h1>-<h6>字体会自动加粗。

2）HTML 段落是通过标签 <p> 来定义的。

3）HTML 链接是通过标签 <a> 来定义的。

<!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>
<body>
    <a href="index.html">链接</a>
   
</body>
</html>

<a>标签的进阶用法

1)

<a href="https://www.example.com">

  <img src="example.jpg" alt="示例图片">

</a>

    让图片当超链接

<a href="#section2">跳转到第二部分</a>

<!-- 在页面中的某个位置 -->

<a name="section2"></a>

跳转

2)         

  1.   下载文档 
    <a href="document.pdf" download>下载文档</a>

  2.    在新窗口打开文档 
    <a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">          访问菜鸟教程!</a> 

  3.    跳出框架 
    <a href="http://www.runoob.com/" target="_top">点击这里!</a>

  4.  简单版电子邮件链接 
    <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a>

  5.  复杂版发送电子邮件 
    <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a> 

  6. 没有下划线的链接 
    <a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>

<img src=””width=””height=””border=””alt=”>    图片         注：alt中内容将在图片无显示的时候代替图片内容

4）HTML 图像是通过标签 <img> 来定义的

<!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>
<body>
    <a href="index.html">链接</a>
    <img src="images/logo.png">
</body>
</html>

5）HTML中<br> / <br/>标签是换行符

6）<hr> 标签在 HTML 页面中创建水平线。

<!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>
<body>
    <a href="index.html">链接</a>
    <hr>
    <p>aaaaa</p>
</body>
</html>

7）<!-- -->注释文本

8）<em></em>定义强调文本（斜体）,<em>替换<i> (<i>斜体字</i>)

9)  <big></big>大号文本

10)  <sub>下标</sub>    <sup>上标</sup>

11)  <del>定义删除字</del>

12)<ins>定义插入字</ins>

13)<link> 标签定义了文档与外部资源之间的关系

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

14）<style> 标签定义了HTML文档的样式文件引用地址

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

15）

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格、】
  • <thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
  • <tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
  • <tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>造梦西游</title>
    <style>
        h1{
            text-align:center;
            color:lightskyblue;
        }
        h2{
            text-shadow:2px 2px darkturquoise;
            text-align:center;
        }
        th{
            background-color:aqua;
        }
        a:link{color:red;}
        a:visited{color:blue;}
        a:hover{color:green;font-size:150%;}
        a:active{color:pink;}
        a{text-decoration: none;}
        .one{outline:green solid;}
        .two{outline:red dotted;}
    </style>
</head>
<body>
    <h1>造梦西游三大闹天庭篇宣花锤</h1>
    <hr style="width:730px;border-top:1px dashed #0066CC;"/>
    <table align="center" border="2" cellpadding="30" style="text-align:left" cellspacing="0">

        <tr><th colspan="2">装备名称</th><th>装备类型</th><th>生命值</th><th>魔法值</th></tr>
        <tr><td colspan="2">宣花锤</td><td>武器</td><td>100~170</td><td>/</td></tr>
        <tr><td rowspan="5" colspan="2"><img src="images/xuanhuachui.png" alt="宣花锤"></td><th>品质</th><th>攻击力</th><th>防御力</th></tr>
        <tr><td>优秀</td><td>20~26</td><td>/</td></tr>
        <tr><th>暴击力</th><th>闪避</th><th>其他属性</th></tr>
        <tr><td>/</td><td>/</td><td>/</td></tr>
        <tr><th>装备描述</th><td colspan="3">街喧闹，人过往，且记曾相识，不为少年留。</td></tr>
        <tr><th>获取方式</th><td colspan="4">打败巨灵神有几率掉落（巨灵神小档案：<a href="https://news.4399.com/gonglue/zmxy3/boss/132055.html">大闹天庭篇巨灵神</a>）</td></tr>
    </table>
    <br>
    <table align="center">
        <caption><h2>造梦问答</h2></caption>
        <td>    
            <ul>
                <li><span style="cursor:help"><a href="https://news.4399.com/gonglue/zmxy3/wenda/335435.html">大闹天庭篇的圣诞老人掉落什么</a></span></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/335433.html" >大闹天庭篇后羿助战在哪</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/332694.html">大闹天庭篇凶兽碎片怎么获得</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/332690.html">大闹天庭篇花宴怎么合成</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/332688.html">大闹天庭篇怎么开启等级上限</a></li>
            </ul>
        </td>
    </table>
    <table align="center">
        <caption><h2>猜你想找</h2></caption>
        <td>    
            <ol>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/335435.html">大闹天庭篇唐僧技能搭配</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/335433.html">大闹天庭篇孙悟空技能搭配</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/332694.html">大闹天庭篇猪八戒技能搭配</a></li>
                <li><a href="https://news.4399.com/gonglue/zmxy3/wenda/332690.html">大闹天庭篇沙僧技能搭配</a></li>
                
            </ol>
        </td>
    </table>
    <table align="center">
        <caption><h2>玩家看法</h2></caption>
        <tr><td>
            <form action="">
                户名：<input type="text" name="用户名"><br>
                密码：<input type="password" name="密码"><br>
                
            </form>
        </td><td>&nbsp;&nbsp;&nbsp;</td><td><input type="submit" value="登录"></td></tr>
        <tr><td> <form action=""><p>性别：<input type="radio" name="sex" value="男">男&nbsp;<input type="radio" name="sex" value="女">女</p></form></td></tr>
        <tr><td><form action=""><p>你最喜欢的角色：</p><input type="radio" name="角色" value="唐僧">唐僧<br>
            <input type="radio" name="角色" value="孙悟空" checked>孙悟空<br>
            <input type="radio" name="角色" value="猪八戒">猪八戒<br>
            <input type="radio" name="角色" value="沙僧">沙僧<br>
        </form></td></tr>
        <tr><td><form action=""><p>你最喜欢的地图：</p>
<input type="checkbox" name="地图" value="碧游宫" > 碧游宫<br>
<input type="checkbox" name="地图" value="截教天境"> 截教天境<br>
<input type="checkbox" name="地图" value="天庭">天庭 <br>

        </form></td></tr>
   
    </table>
  <div style="text-align:center">
    <textarea rows="10" cols="60" > 
       点击输入你的评论，跟小编说说你的看法！
    </textarea>
    <form aciton="">
        <input type="submit" value="我要发表" >
    </form>
    </div>
    
    
</body>
</html>

16）

<ul>

<li><li/>

<ul/>

  无序列表

<!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>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

17）

<ol>

<li><li/>

<ol/>

  有序列表

<!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>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
    </ol>
</body>
</html>

18）区块元素

1.<div>定义了文档的区域，块级 (block-level)

2.<span>用来组合文档中的行内元素， 内联元素(inline)

19）表单元素

  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
  • <label> 元素用于为表单元素添加标签，提高可访问性。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

1.

  • 1 
    .<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>           
    ​​​​​​​                                      普通输入框和密码输入框 
<!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>
<body>
    <form action="">
    Username: <input type="text" name="user"><br>
    Password: <input type="password" name="password">
    </form>    
</body>
</html>

2.

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form> 

              单选

<!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>
<body>
    <form action="">
        <input type="radio" name="sex" value="male">男<br>
        <input type="radio" name="sex" value="female">女
        </form>       
</body>
</html>

3.

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>   

            复选

<!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>
<body>
    <form>
        <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
        <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
        </form>         
</body>
</html>

4.

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

              提交

<!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>
<body>
    <form name="input" action="html_form_action.php" method="get">
        Username: <input type="text" name="user">
        <input type="submit" value="Submit">
        </form> 
</body>
</html>

5.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>

                预选下拉菜单

<!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>
<body>
    <form action="">
        <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
</body>
</html>

4.HTML的属性

1）<a href="http://www.runoob.com">这是一个链接</a> 连接的地址在href属性中定义

2）class  为html元素定义一个或多个类名（classname）

3）id   定义元素的唯一id

4）style  规定元素的行内样式（inline style）

5）title 描述了元素的额外信息 (作为工具条使用)

二、CSS

1.什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

2.CSS语法

p
{
    color:red;
    text-align:center;
}           

     

注：CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来；CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明；

该例中p为选择器，color与text-align均为属性，red与center均为值。

3.CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 如:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

4.CSS选择器

1）id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="one"

#one
{
    text-align:center;
    color:red;
}

注： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2）class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中


.one
{
    text-align:center;
    color:red;
}

5.CSS的创建（样式表）

1）外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部，样式表应该以 .css 扩展名进行保存

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head

>

注：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

2）内部样式表(Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


3)内联样式(Inline style)

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注：除此以外还有多重样式，即将三种方法混合使用，多重样式的优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

6.CSS background

CSS 属性定义背景效果:

  • background-color

  • background-image

  • background-repeat
  • background-attachment
  • background-position

旧梦想吃汤圆
关注
  • 14
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
预习资料-ELK入门及集群搭建1
08-08
1.日志量太大如何归档、文本搜索太慢怎么办、如何多维度查询2.应用太多，面临数十上百台应用时你该怎么办3.随意登录服务器查询log对系统的稳定性及安全性肯定有影
前端-html-0预习
12-26
HTML的目的是通过一系列的标签来组织网页内容，使得内容格式统一，便于理解和解析。简单来说，HTML就像网页的骨架，提供了页面的基本结构。 HTML的主要作用是开发网页。一个完整的网页通常由HTML、CSS（Cascading ...
第一周预习-HTML+CSS入门
wyhshd的博客
03-23 977
和
HTML & CSS标签基础
syste_return的博客
04-28 449
此外，HTML与CSS（层叠样式表）和JavaScript结合使用，可以进一步增强网页的外观和交互性，HTML5的引入为开发人员提供了更多语义化的元素，使代码更容易理解和修改，同时，响应式设计使得网页能够在不同设备上良好地显示。HTML文档的基本结构包括头部和主体两部分，其中头部包含浏览器所需的信息，如标题、元数据等，而主体则是网页的主要内容。HTML是超文本标记语言(HyperText Markup Language)的缩写，是用于创建网页的标准标记语言。展示的是内嵌式的几种选择器。
蓝旭24春季培训-第一周预习-HTML+CSS入门
2303_80228948的博客
03-23 990
蓝旭24春季培训-第一周预习-HTML+CSS入门，HTML的结构、常用标签、全局属性、类型，CSS的引入方式、选择器、简单样式及简单定位方法
第一周预习：HTML+CSS入门
2301_80196462的博客
03-22 1291
板块2行表头单元格内容单元格列表标题列表描述
第一周预习-Web前端开发技术，HTML+CSS入门
An_Ad的博客
03-23 677
CSS的主要功能是分离内容与设计，使得网页开发者能够更好地控制网页的外观和格式。它可以用来指定字体、颜色、边距、间距、大小、对齐方式等，从而使得网页的视觉效果更加丰富和多样化。
[期末网页作业]-小米官网（html+css+js）
07-04
在为页面添加样式和布局时，我采用了CSS来设置不同元素的外观和排列方式。我注重了颜色的搭配、字体的选择和页面的整体美感，以确保用户在访问页面时能够获得愉悦的视觉体验。 总之，这个仿写的小米官网页面是我在...
HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx
12-23
HTML5+CSS3网页设计基础-第1章-网页设计基础 本章主要介绍网页设计的基础知识，包括网页的基本元素、网页的布局结构、创建HTML5页面、HTML5基础等内容。本章的学习目标主要是了解网页上常见的基本元素及其特点，...
ACCP8.0S1的使用HTML语言和CSS开发商业站点第二部分
02-27
北大青鸟ACCP8.0S1学期中的使用HTML语言和CSS开发商业站点完整版，分成了2个部分，这是第二部分，请下载
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1269
title>充电效果
HTML 学习指南：从入门到精通
英英的博客
07-09 428
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html&css基础
antyuki的博客
07-09 780
/
HTML(30)——动画
m0_74386799的博客
07-09 1131
实现步骤@keyframes 动画名称{from{}to{}@keyframes 动画名称{0%{}10%{}....100%{}2.使用动画示例：盒子的宽度从200变到400px，两个状态一般用from to的形式。
CH15-DOM元素属性
最新发布
IT技术类博客
07-13 719
DOM 元素
HTML(29)——立体呈现
m0_74386799的博客
07-09 580
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。
初识HTML
Dxito_的博客
07-09 880
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
html（抽奖设计）
2301_81704123的博客
07-13 149
可以根据自己的喜好设计抽奖内容，或者修改颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值