HTML&CSS入门

农专猿

已于 2023-03-11 15:48:59 修改

阅读量44

点赞数

分类专栏：后端前端文章标签：前端 html Powered by 金山文档

于 2023-03-08 20:56:44 首次发布

本文链接：https://blog.csdn.net/m0_73886108/article/details/129036609

版权

后端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

HTML

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的

HTML（HyperText Markup Language）：超文本标记语言

>超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

>标记语言：由标签构成的语言

HTML 运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的。例如：使用<img>展示图片

W3C标准：网页主要由三部分组成

>结构：HTML

>表现：CSS

>行为：JavaScript

图片音频视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    资源路径
        1、绝对路径：完整路径
        2、相对路径：相对位置关系
    尺寸单位
        1、px:像素
        2、百分比
-->
<img src="a.jpg" width="389" height="500">
<img src="https://w.wallhaven.cc/full/m9/wallhaven-m9xyg8.jpg" width="30%" height="20%">
<audio src="b.mp3" controls="controls"></audio>
<video src="c.mp4" width="600" height="400" controls="controls"></video>

</body>
</html>

表格标签

table：定义表格

>border：规定表格边框的宽度

>width：规定表格的宽度

>cellspacing：规定单元格之间的空白

tr：定义行

>align：定义表格行的内容对齐方式

td：定义单元格

>rowspan：规定单元格可横跨的行数

>colspan：规定单元格可横跨的列数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
    <tr align="center">
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="30" height="20"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="30" height="20"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/小米.png" width="30" height="20"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>
</body>
</html>

表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项（元素）：不同类型的input元素、下拉列表、文本域等

form 定义表单

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式

get：浏览器会将数据直接附在表单的 action URL之后。大小有限制

post：浏览器会将数据放到http请求消息体中。大小无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <!--文本输入框-->
    <input type="text" name="username">
    <!--按钮-->
    <input type="submit">
</form>

</body>
</html>

表单标签-表单项

<input>:表单项，通过type属性控制输入形式

<select>:定义下拉列表，<option>定义列表项

<textarea>:文本域

type取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
  <input type="hidden" name="id" value="1234">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" name="password" id="password">
  <br>
  性别：
  <input type="radio" name="gender" value="男" id="male"> <label for="male">男</label>
  <input type="radio" name="gender" value="女" id="female"> <label for="female">女</label>
  <br>
  爱好：
  <input type="checkbox" name="hobby" value="1">旅游
  <input type="checkbox" name="hobby" value="2">电影
  <input type="checkbox" name="hobby" value="3">游戏
  <br>
  头像：
  <input type="file">
  <br>
  城市：
  <select name="city">
    <option value="bei">北京</option>
    <option value="shang">上海</option>
    <option value="guang">广州</option>
  </select>
  <br>
  个人描述：
  <textarea rows="2" cols="20" name="desc"></textarea>
  <br><br>
  <input type="submit" value="免费注册">
  <br>
  <input type="reset" value="重置">
  <br>
  <input type="button" value="普通按钮">
</form>
</body>
</html>

CSS

CSS导入HTML有三种方式：

内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color: blueviolet">Hello CSS!</div>

内部样式：定义<style>标签，在标签内部定义css样式

<style>
span{
color: blue;
}
</style>
<span>hello css </span>

外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet" href="../css/demo.css">

CSS选择器

概念：选择器是选取所需设置样式的元素（标签）

div{
color: red;
}

分类：

元素选择器

div{
      color: red;
    }

id选择器（需唯一）

#name{
      color: blue;
    }

<div id="name">div2</div>

类选择器（可选择多个）

.cls{
      color: blueviolet;
    }

<div class="cls">div3</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*元素选择器*/
    div{
      color: red;
    }
    /*id选择器*/
    #name{
      color: blue;
    }
    .cls{
      color: blueviolet;
    }
  </style>


</head>
<body>

<div>div1</div>

<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>