Html快速讲解

最新推荐文章于 2023-11-22 11:43:00 发布

随便war

最新推荐文章于 2023-11-22 11:43:00 发布

阅读量334

点赞数

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

本文链接：https://blog.csdn.net/weixin_45248543/article/details/106974342

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

什么是HTML

HTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。百度百科

HTML是网页的骨架，是开始学习制作网页的第一步，它是由一堆标签组合起来的

必需了解

每个标签都要有开始和结束，如：
- <p></p> 中<p>为开标签，</p>为闭标签，这种用于中间需要插入数据的标签，可以对插入的数据产生效果
- <br/> 这个的开始和结束写到了一起，用于不会对文本产生效果的标签；这里的这个标签意思为换行，不会对文本产生效果
有时候忘记写关闭标签了也不会报错，浏览器会自动解析，但是真正写项目不能忘
文件名后缀为.html或.htm
在文本上打多个空格时，html会自动将其变为一个；后面会说如何打多个空格
html不区分大小写：比如上面的<br/>和<BR/>效果一样，但是一般建议小写
注释：

块元素和行内元素

简单了解，下面会详细介绍

后期可通过css把这两个互换

行内元素（内联元素）：
- 和其他元素都在一行上
- 高度、行高和顶以及底边距都不可改变
- 宽度就是它的文字或图片的宽度，不可改变
块元素
- 总是在新行上开始，占据一整行
- 高度，行高以及外边距和内边距都可控制
- 宽度始终是与浏览器宽度一样，与内容无关
- 它可以容纳内联元素和其他块元素

基本定义参考自百度百科

基本的行内元素有：<a>、<b>、<em>、<i>、<u>……
基本的块元素有： <p>、<div>、<span>、<h1>~<h6>……

基本文件结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
这是内容主体
</body>
</html>

<!DOCTYPE html>：代表该文档使用html编写
<html lang="en"></html>：所有的文件都写在这个标签的内部，lang="en"可以删除，不删除也可以写中文，只是让浏览器是否显示翻译为en则翻译
<head></head>：网页头部信息
<meta charset="UTF-8">：使用UTF-8编码
<title>HTML</title>：网页标题
<link rel="stylesheet" href="style.css">：引入css文件
<body></body>：网页主体信息，我们主要修改这个地方

常用的标签

标题标签

只有六级，如果定义了其他级的，就会被复原成普通文本大小

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

效果：

常用的没有实际意义的标签

没有实际意义，就是不会产生效果

<p>标签，段落标签，是块元素，常用于定义一个段落，方便对那一个段落进行操作
<div>标签，对文档里的一个部分进行定义，是块元素，方便对那一个部分进行操作，也可以使逻辑更加清晰
<span>标签，定义文档的里的某一部分，是行内元素，比如对一段话中的两个字使用<span>就可以单独对那两个字进行操作

<!--常用操作-->
<div>
	<p>这是一个段落</p>
	<p>这是<span>第二</span>段</p>
</div>

效果：

这是一个段落

这是第二段

其他

标签名	介绍
`<header>`	头部信息
`<nav>`	导航栏
`<aside>`	侧边栏
`<main>`	内容区域
`<footer>`	底部信息
`<article>`	文章详情
`<section>`	页面分区

特殊标签

这是换行<br/>标签

这是
<hr/>
分割线标签

效果：

这是换行
标签

这是

分割线标签

文本样式标签

这些均可以用css实现

name	用法
`<b>`	加粗
`<i>`	斜体
`<sub>`	下标
`<del>`	删除线

<b>这是加粗的文本</b><br />
<i>这是斜体</i><br />
带下标 X<sub>3</sub><br />
<del>带删除线</del><br />
带上标 X<sup>2</sup>

效果：

这是加粗的文本

这是斜体

带下标 X₃

~~带删除线~~

带上标 X²

列表标签

<ul>无序列表
<ol>有序列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
<br />
<ul>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
</ul>

效果：

列表项1
列表项2
列表项3

列表项4
列表项5
列表项6

超链接标签

用于从一个网页跳转到另一个网页

<a href="http://www.baidu.com/" target="_blank">点我跳转到百度</a>

href：用于指定跳转到的网页
target：指定打开该网页的方式
- _blank：在一个新的标签页上打开
- _self：在当前标签页打开

效果：

点我跳转到百度

媒体标签

<!--图片标签-->
<img src="Test.png"/>

<!--视频标签-->
<video src="Test.mp4" controls>如果浏览器不支持，将显示这段话</video>

<!--音频标签-->
<audio src="Test.mp3" controls>如果浏览器不支持，将显示这段话</audio>

src：图片/视频/音频文件地址，可以用本地的或者网上的
controls：向用户显示一个播放按钮，可更换为
- autoplay：视频/音频在就绪后马上播放
- loop：每当播放结束后重新开始播放
- muted：音频/音频默认为静音播放

没有音视频，所以不演示了

表格

<table align="center" border="1px" width="400px" height="200px">
	  <thead>
	  <tr>
		<th >1-1</th>
		<th>1-2</th>
		<th>1-3</th>
	  </tr>
	  </thead>
	  
	  <tfoot>
	  <tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	  </tr>
	</tfoot>
	
	<tbody>
	  <tr>
	  <td colspan="2">3-1</td>
	  <td>3-2</td>
	  </tr>
	  <tr>
		<td rowspan="2">4-1</td>
		<td>4-2</td>
		<td>4-3</td>
	  </tr>
	  <tr>
		<td>5-2</td>
		<td>5-3</td>
	  </tr>
	</tbody>
	
</table>

<table>：说明我们要定义的是表格
- border：css样式，定义边框
- width和height：定义高和宽
- align：相对于周围元素的对齐方式，可取值有：
- center：居中
- left：左对齐
- right：右对齐
<thead>：表格头部，不管是否在最上面定义，都会把这个标签中的内容放到第一行
<tbody>：表格体，主要内容
<tfoot>：表格脚部，会把这个标签下的所有内容放到最后一行
<tr>：定义一行
<th>：用于定义头部的元素，会加粗显示
<td>：用于定义每一个表格中的元素
colspan：元素跨列，从左往右，不可从右往左
rowspan：元素跨行，从上往下，不可从下往上

效果：

—

表单

用于收集用户数据

<!--这里用了表格的一些标签帮助美化表单-->
<form action="www.hellowar.club" method="post">
	  <table align="center">
		<tr>
		  <td>用户名：</td>
		  <td><input  type="text" value="默认输入" name="username"/></td>
		</tr>
		
		<tr>
		  <td>密码：</td>
		  <td><input  type="password" name="password"/></td>
		</tr>
		
		<tr>
		  <td>确认密码：</td>
		  <td><input  type="password"/></td>
		</tr>
		
		<tr>
		  <td>性别：</td>
		  <td>
			<input type="radio" name="sex" checked="checked" value="boy"/>男
			  <input type="radio" name="sex" value="girl"/>女
		  </td>
		</tr>
		
		<tr>
		  <td>兴趣爱好：</td>
		  <td>
			<input type="checkbox" value="java" name="hobby"/>Java
			<input type="checkbox" value="c" name="hobby"/>C
			<input type="checkbox" value="js" name="hobby"/>JavaScript
		  </td>
		</tr>
		
		<tr>
		  <td>国籍：</td>
		  <td>
			<select name="county">
			  <option selected="selected" value="null">—请选择国籍—</option>
			  <option value="China">中国</option>
			  <option value="Japan">日本</option>
			  <option value="USA">美国</option>
			</select>
		  </td>
		</tr>
		
		<tr>
		  <td>自我评价</td>
		  <td>
			<textarea rows="10" cols="20" name="docs">这里是默认值</textarea>
		  </td>
		</tr>
		
		<tr>
		  <td><input type="reset"/></td>
		  <td><input type="submit"/></td>
		</tr>
		
	  </table>
</form>

<from>：表单标签
- action ：设置服务器提交地址
- method : 设置提交方式
- get ：把数据直接添加到网址后，传输给服务器，通过查看网址可以看到数据，不安全，且传输数据量小（默认）
- post : 将表单数据附加到 HTTP 请求的 body 内，不显示数据，较安全，且数据量没有限制
<input type="">：type等于的值可以写为以下的
- text ：单行文本输入框
- password ：密码输入框，输入密码可自动隐藏
- radio ：单选框
- 必须要统一name的值
- checkbox ：多选框
- reset ：重置按钮，不设置value时默认显示为重置
- submit ：提交按钮，不设置value时默认显示为提交
- button ：按钮，默认无文字显示

从这里往上的定义的value的值均为输入框的默认值或按钮显示的文字

<input type="">：
- file ：选择文件
- hidden ：隐藏域，不可见，针对开发者使用
<select>：下拉列表框
- <option>：下拉列表框中的选项
- selected="selected" ：设为默认选中
- value ：上传数据时的标识
<textarea>：多行文本输入框
- rows ：输入框的显示的行数
- cols ：输入框显示的列数

表单没有正确提交给服务器的原因：

没有设置name属性，只有表单中的项设置name属性后才能传给服务器
单选、复选、下拉列表项都应该value属性，以便于发给服务器后做识别
表单项不在<from>标签中

效果：

iframe内联框架

在一个网页中显示另一个网页，不常用

<iframe src="http://www.baidu.com" width="300px" height="300    px"></iframe>

效果：

转义字符

字符	转义字符
空格	` `
＜	`<`
＞	`>`

很多请看字符对照表

HTML实例

<!DOCTYPE html>
<html>
	<head>
		<title>第一个网页</title>
	</head>
	<body>
		<nav>
			<a href="/">首页</a>
			<a href="/about/index.html">关于</a>
		<nav>
		<header>
		  头部信息，欢迎来到我的博客
		</header>
		<aside>
		  侧边栏
		</aside>
		<main>
		  <section>
			  <article>这是一篇博客</article>
			</section>
			<section>
			  <div>
				  <p>这是一些描述</p>
					<p>不知道写啥</p>
				</div>
			</section>
		</main>
		<footer>
		底部信息
		</footer>
	</body>
</html>

效果：

差不多就这样了~~~

随便war

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html快速讲解

什么是HTMLHTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。百度百科HTML是网页的骨架，是开始学习制作网页的第一步，它是由一堆标签组合起来的必需了解每个标签都要有开始和结束，如：<p></p> 中<p>为开标签，</p>为闭标签，这种用于中间需要插入数据的标签，可以对
复制链接

扫一扫