HTML基础

天演L

已于 2023-10-10 20:34:24 修改

阅读量192

点赞数 6

分类专栏：前端文章标签： html 前端

于 2023-10-10 20:33:57 首次发布

本文链接：https://blog.csdn.net/weixin_61611746/article/details/132111186

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页的构成：

HTML：用于搭建基础网页，展示页面的内容（结构）

CSS：用于美化页面，布局页面（表现）

JavaScript：控制页面的元素，让页面有一些动态的效果（行为）

1.HTML的概述

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

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

标记：就是标签。可以使用一系列的标签，将网络是的文档格式统一，使分散的资源连接为一个逻辑整体

HTML的组成：

HTML页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的

2.快速入门

1.新建文本文件，后缀名改为.html

2.编写HTML结构标签

<html>
<head>
	<title></title>
</head>
<body>
	

</body>
</html>

3.在<body>中定义文字

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>html 快速入门</title>
</head>
<body>
	我真帅

</body>
</html>

改为红色：

<font color="red">我真帅</font>

html:html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部的资源

title：标题标签，显示在浏览器标签上。

body：身体标签，包含所有的文档内容

<!DOCTYPE html>：html5中定义该文档是html文档

3.基础标签

例：

<!--html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr>
<!--
    html颜色表示：
    1.英文单词：red，pink，blue...
    2.rgb（值1，值2，值3）：值的取值范围：0~255  rgb（255,0,0）
    3.#值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ffc0cb">我真帅</font>
<hr>
再给我两分钟，<br>让我把记忆结成冰
<p>
别融化了眼泪，你妆都花了要我怎么记得
</p>
<p>
记得你叫我忘了吧，记得你叫我忘了吧
</p>
<hr>
<center>
  <b>你说你会哭不是因为在乎</b>
</center>
</body>
</html>

4.图片音频视频标签

1.图片音频视频标签

img：定义图片
   src：规定显示图像的URL（统一资源定位符）
   height：定义图像的高度
   width：定义图像的宽度
audio：定义音频。支持音频格式：MP3，WAV，OGG
   src：规定音频的URL
   controls：显示播放控件
video：定义视频。支持的音频格式：MP4，WebM，OGG
   scr：规定视频的URL
   controls：显示播放控件

2.尺寸单位

px和%

3.路径

绝对路径和相对路径

例：

5.超链接标签

href：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.bilibili.com" target="_blank">点我有惊喜哦</a>
</body>
</html>

6.列表标签

例：

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

<ol type="A">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

7.表格标签

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>
    <th>序号</th>
    <th>品牌logo</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>
  <tr align="center">
    <td>010</td>
    <td><img src="../img/OIP-C (1).jpg" width="60" height="60"></td>
    <td>藤原拓海</td>
    <td>藤原拓海</td>
  </tr>
  <tr align="center">
    <td>009</td>
    <td><img src="../img/OIP-C (2).jpg" width="50" height="60"></td>
    <td>高桥凉介</td>
    <td>高桥凉介</td>
  </tr>
  <tr align="center">
    <td>008</td>
    <td><img src="../img/OIP-C (3).jpg" width="60" height="50"></td>
    <td>夏树</td>
    <td>夏树</td>
  </tr>
</table>
<br>
<hr>
<br>

<table border="1" cellspacing="0" width="500">
  <tr>

    <th colspan="2">品牌logo</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>
  <tr align="center">
    <td>010</td>
    <td><img src="../img/OIP-C (1).jpg" width="60" height="60"></td>
    <td>藤原拓海</td>
    <td>藤原拓海</td>
  </tr>
  <tr align="center">
    <td rowspan="2">009</td>
    <td><img src="../img/OIP-C (2).jpg" width="50" height="60"></td>
    <td>高桥凉介</td>
    <td>高桥凉介</td>
  </tr>
  <tr align="center">
    
    <td><img src="../img/OIP-C (3).jpg" width="60" height="50"></td>
    <td>夏树</td>
    <td>夏树</td>
  </tr>
</table>
</body>
</html>

8.布局标签

例：

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

<div>我是div</div>
<div>我是div</div>

<span>我是span</span>
<span>我是span</span>
</body>
</html>

9.表单标签

表单：在网页中主要负责数据采集功能，使用<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:指定表单数据的URL
    *表单项数据想要被提交，则必须指定其name属性
  method:指定表单提交的方式
    1.get：默认值
      *请求参数会拼接在URL后边
      *url的长度有限制 4kb
    2.post：
      *请求参数会在http请求协议的请求体中
      *请求参数无限制的
-->
<form action="#">
  <input type="text" name="username">
  <input type="submit">
</form>
</body>
</html>

10.表单项标签

<input>：表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option>定义列表项
<textarea>：文本域

例：

<!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="123">
  <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="1" id="male"> <label for="male">男</label>
  <input type="radio" name="gender" value="2" 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>北京</option>
    <option value="shanghai">上海</option>
    <option>广州</option>
  </select>
  <br>
  个人描述
  <textarea cols="20" rows="5" name="desc"></textarea>
  <br>
  <input type="submit" value="免费注册">
  <input type="reset" value="重置">
  <input type="button" value="一个按钮">
</form>
</body>
</html>

天演L

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

超文本标记语言超文本：超越了文本的限制，比普通文本更加强大。除了文字信息，还可以定义图片，音频，视频等内容标记：就是标签。可以使用一系列的标签，将网络是的文档格式统一，使分散的资源连接为一个逻辑整体HTML页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的。
复制链接

扫一扫

专栏目录