HTML01_HTML入门

最新推荐文章于 2024-08-03 20:32:29 发布

菜鸡本蔡

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量920

点赞数

文章标签： html 前端 vue.js

本文链接：https://blog.csdn.net/qq_59727955/article/details/123502666

版权

本文介绍了HTML作为网页制作的基础语言，讲解了HTML5常用标签、页面结构、文本和图像处理、超链接、列表、表格及多媒体元素的使用。强调了在学习过程中不必过分纠结细节，多实践以掌握核心概念。同时提到了HTML在网站管理系统、物联网和游戏设计等领域的应用。

摘要由CSDN通过智能技术生成

要求：

1.聊：技术项目——口才——

2.技术——写出来。

网站管理系统——京东淘宝知乎智联 51job（浏览器端PC端手机端）

物联网——搭伴——接触——

嵌入式：C写的——机器人 ——很难

Python——人工智能爬虫 ——不做web（不好用）

做游戏——设计游戏

1. 课程内容

HTML——入门。

2. 具体内容

2.1 课程要求以及本门课的作用

html：做页面的。——做好之后其实静态的。

2.2 HTML入门简介

2.2.1 什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML——H5

H5里边多了很多的元素标签（很多都不学）

入门——常用标签 …

后期写项目：框架（LayuI ElementUI VUE agular…）

学习期间不要扣太细，差不多就行——多写几遍。

2.2.2 为什么要使用html

为了做网页。

2.2.3 编写html开发工具

开发环境：——写代码地方

文本——文本编辑器就可以写。

语言——你自己写的代码，是为了让电脑理解，然后帮我干活。

电脑——二进制和汇编

软件——浏览器来识别这个HTML语言。

运行环境：

总结：程序语言来说，语言都需要依赖软件来运行出结果。

集成环境：开发环境+运行环境。
在这里插入图片描述

<!doctype html>
<html lang="en">
 <head>
  <!--编码格式：主要是避免中文乱码的   UTF-8   GBK-->
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  这是我的第一次课
  <h1>感觉还不错</h1>
  <i>这是另外一个标签</i>
 </body>
</html>

2.3 基本结构

<!--html的基本结构，html标签就是根标签-->
<html>
 	<!--头：对应的浏览器的头部，设置头部文字 设置编码格式  等-->
	<head>
		<!--头部文字-->
		<title>************</title>
        <meta charset="utf-8"/>
	</head>
	<body>
		<!--体：浏览器内容的主体部分-->
		AAAAAAAAA
	</body>
</html>

2.4 标签格式
双标签：<标签名>标签体</标签名>
单标签：<标签名/>
2.5 基本标签
2.5.1 标题标签

<!--加粗效果  放大效果  换行效果   段前段后-->
  <h1>感觉还不错</h1>
  <h2>感觉还不错</h2>
  <h3>感觉还不错</h3>
  <h4>感觉还不错</h4>
  <h5>感觉还不错</h5>
  <h6>感觉还不错</h6>

2.5.2 段落标签
hr分割线 br换行 p分段

<!--分割线-->
  <hr/>
  <!--换行效果，添加了段前段后  -->
  <p>
	  这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课
	  <br/><!--换行符-->
	  这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课
	  这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课
	  这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课这是我的第一次课
	  这是我的第一次课
  </p>

2.5.3 文本标签
文本标签不会换行。
b加粗 i斜体 sub下标 sup上标 font：设置文本大小和颜色

<body>
  福建省打开了房间的时空裂缝极度空灵司法鉴定所开了房间都上课了房间独守空房监控室砥砺奋进圣诞快乐封建时代李开复接待室里看风景
  <b>的时刻</b>
  积分看电视剧付款了电视剧付款了电视剧分开但是福建烤老鼠大嫁风尚打开了房间SDK丽枫酒店时空裂缝绝对是快乐健康理发店设计费亏了
  <i>多少</i>
  荆防颗粒时代峻峰
  <font size=7 color=red>凉快</font>
  圣诞节里看风景时打开了房间都上课了飞机上打开了房间少得可怜房间卡点了司法鉴定所李逵负荆肯定是浪费接待室里看风景独守空房<sub>2</sub>留点时间<sup>[1]</sup>
</body>

2.5.4 img图片标签

<!--双标签：内容都是由标签体决定的，标签对内部内容起样式上的作用-->
  <!--单标签：所有内容  样式也好全部都是在标签属性上定义-->
  <!--src：图片路径的-->
  <!--如果图片和文件在一起可以直接写文件名-->
  <img src="IMG_7527.jpg" width="100px" height="100px"/>
  <!--如果图片和文件在不在一起：需要以路径的形式找到-->
  <!--相对路径：自己和目标的之间的距离，../出文件夹  文件夹名/进文件夹-->
  <img src="../img/IMG_7528.JPG" width="100px" height="100px"/>
  <!--绝对路径：从磁盘根开始的（不推荐）-->
  <img src="D:\AAA\qy152\img/IMG_7528.JPG" width="100px" height="100px"/>
  <!--绝对路径：网络形式的-->
  <img src="http://image.zyz.org.cn/vms/2016/07//1477642065455ba37d22d3ace49f8ab1082209988425a" width="100px" height="100px"/>

路径！！！！！！：
相对路径：两个文件之间相对查找的一个过程。
绝对路径：
磁盘：不推荐
网址的可以——推荐

图片格式
BMP 是（Windows 位图） Windows 位图，可以用任何颜色深度（从黑白到 24 位颜色）存储单个光栅图像。
JPG是Joint Photographic Experts Group(联合图像专家组)的缩写,文件的扩展名为.jpg或.jpeg，图像品质高，下载速度快
GIF(Graphics Interchange Format)的原义是"图像互换格式"，是CompuServe公司在 1987年开发的图像文件格式。GIF格式的特点是压缩比高，磁盘空间占用较少，可制作2D动画文件
PNG格式：PNG(Portable Network Graphics)的原名称为"可移植性网络图像"，是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件

2.5.5 超链接以及锚点

<body>
   <!--绝对路径-->
   <a href="https://www.baidu.com">百度</a>
   <!--绝对禁止-->
   <a href="D:\AAA\qy152\前端\class03.html">class03</a>

   <!--相对-->
   <a href="../img/IMG_7527.jpg">class02</a>
   <a href="class02.html">class02</a>
 </body>

a：可以锚点——在一个页面中做定位的。
定义锚点：给某一个位置起名字，相当于打标签。

<a name="锚点名">文本</a>

锚点的跳转：

<a href="#锚点名">文本</a>

<a href="#caibao">财报数据 播报</a>
 <a href="#chanpin">百度产品</a>
 <a href="#shuoming">说明</a>
 <hr/>
 
  <h1><a name="shuoming">说明</a></h1>

其他文件：

<a href="class06.html#caibao">class06</a>

2.5.6 无序列表有序列表

<body>
  <!--标签就算写错了，也出效果-->
  <!--无序:ul里边只能书写li，li中可以书写任意东西-->
  <ul>
     <li>
		<h1>1111</h1>
		<ul>
			<li>ddddd</li>
		</ul>
	 </li>
	 <li>1111</li>
	 <li>1111</li>
	 <li>1111</li>
	 <li>1111</li>
  </ul>
  <!--有序-->
  <ol>
	<li>dddd</li>
	<li>dddd</li>
	<li>dddd</li>
	<li>dddd</li>
  </ol>
 </body>

2.5.7音频audio，视频标签video

autoplay：如果出现该属性，则音频在就绪后马上播放。
controls：如果出现该属性，则向用户显示控件，比如播放按钮。
loop：如果出现该属性，则每当音频结束时重新开始播放。
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src：要播放的音频的 URL。

2.6 注释和特殊字符
注释：给代码写说明，这个东西浏览器不会渲染。给程序员自己看的。

特殊字符：
在这里插入图片描述

2.7 表格
在这里插入图片描述

表格的标签没有列的标签——一行有几个单元格就有几列。

基本标签：
table：最外边的一个根标签
caption：标题
tr：行
td：单元格（列，一行有几个td就是几列），内容必须书写在td中。
th：单元格（做表头的单元格——自带效果：加粗居中），th和td可以混用

分组标签：

<table>
	<!--可选可以不要-->
	<caption>表1 学生信息表</caption>
	<!--tr td都不可以少-->
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>dddd</td>
		<td>男</td>
		<td>100</td>
		<td>199999999999</td>
	</tr>
	<tr>
		<td>dddd</td>
		<td>男</td>
		<td>100</td>
		<td>199999999999</td>
	</tr> 
	<tr>
		<th>dddd</th>
		<td>男</td>
		<td>100</td>
		<td>199999999999</td>
	</tr>
  </table>

属标签性
签名边上写的属性都叫标签属性。

功能属性：类似a的href
合并单元格：
colspan：跨列合并。
rowspan：跨行合并
样式属性：图片的width font ：color——简单了解
border:边框
width：宽
height：高
bgColor：背景颜色
background：背景图片
**align：**对齐方式——加给table是表格相对于页面的对齐方式如果加给tr或者td是单元格中文本的对齐方式。
valign：上下的对齐方式。
cellspacing:外留白
cellpadding：内留白
在这里插入图片描述

<table border=1 align="center" width="800px" height="100px" 
  cellpadding="0" cellspacing="0" background="../img/1.jpg">
	<!--可选可以不要-->
	<caption>表1 学生信息表</caption>
	<!--tr td都不可以少-->
	<tr>
		<th colspan="2" rowspan="2">姓名</th>
 		<th>年龄</th>
		<th>电话</th>
	</tr>
	<tr align="center" bgColor="red">
		<td>100</td>
		<td>199999999999</td>
	</tr>
	<tr>
		<td>dddd</td>
		<td>男</td>
		<td>100</td>
		<td rowspan="2">199999999999</td>
	</tr> 
	<tr>
		<th>dddd</th>
		<td>男</td>
		<td>100</td>
 	</tr>
  </table>

菜鸡本蔡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML01_HTML入门

要求：1.聊：技术项目——口才——2.技术——写出来。网站管理系统——京东淘宝知乎智联 51job（浏览器端PC端手机端）物联网——搭伴——接触——嵌入式：C写的——机器人 ——很难Python——人工智能爬虫 ——不做web（不好用）做游戏——设计游戏1. 课程内容HTML——入门。2. 具体内容2.1 课程要求以及本门课的作用html：做页面的。——做好之后其实静态的。2.2 HTML入门简介2.2.1 什么是HTML超文本标记语言（英语：HyperText
复制链接

扫一扫