HTML基础

hello..world

已于 2024-03-26 21:14:06 修改

阅读量317

点赞数 13

文章标签： html 前端

于 2024-03-26 19:57:20 首次发布

本文链接：https://blog.csdn.net/m0_74730282/article/details/137055265

版权

基本标签

标题标签

标题标签默认是块元素, 独自占一行

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

段落标签

段落标签: 如果一个段落文字太多, 那么他会自适应浏览器窗口, 一行显示不下,自动换行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
	</p>
	<p>
		我是一段很长的话，
	</p>
	<p>
		我是一段很长的话，
	</p>
</body>
</html>

换行标签

将文本换行显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	第一行<br/>
	第二行<br/>
	第三行<br/>
</body>
</html>

hr标签

<div>
	<hr>
</div>

span标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>1234</span>
	<span>5678</span>
</body>
</html>

div标签

img标签

src可以为网页url图片路径
title鼠标悬浮时提示信息
width和height 两个属性只使用一个会等比例缩放图片

<img src="smiley-2.gif" alt="Smiley face" width="100" height="100" title="图片">

超链接标签

target: (窗口链接的打开方式)

_blank 新窗口打开
_parent 在父窗口打开
_self 默认在当前页面跳转
_top 在当前窗口打开链接, 并替换整个窗体

<a href="http://www.baidu.com" target="_blank">百度</a>

src和href的区别

看到这里可能有一些疑问, img的src和超链接标签的href不都是具体路径吗, 那么他们的区别是什么

src偏重于资源文件
href偏重于超链接

格式化标签

<body>
	<strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <ins>下划线</ins>
    <u>下划线</u>
</body>

这里的strong和b都是加粗文本, 本质上并没有什么区别, strong的语义更为强烈

sup上标和sub下标

<body>
	<p>
		x<sup>2</sup>
	</p>
	<p>
		log<sub>2</sub>10
	</p>
</body>

pre预格式化标签

<pre>
	我是一个 有样式
	的文字
</pre>

相较于之前的p标签, 在pre中书写的内容都会按照pre的格式显现出来, 而p段落标签不能

行内元素、行内块元素和块级元素

html将标签分为三类, 行内元素, 块元素,和行内块元素

行内元素

不会独占一行, 自左向右排列, 一行排满再换一行
行内元素的宽高是无法指定的, 默认是被内容撑开的
对于margin只有左右有效, padding各个方向都有效
不会自动换行

行内块元素

具有行内元素和块元素的特点
不会独占一行, 可以自定义宽高, 不受文本内容限制
排序方式从左到右

块元素

能够识别宽高
Margin和padding各个方向都可以使用
独占一行
多个块级标签写在一起,排序方式默认为从上到下

修改元素属性

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

标签元素分类

行内元素
- a
- span
- b i u strong
- br
- code
- q
行内块元素
- image
- button
- input
- select
- textarea
- label
块元素
- p
- h
- ul ol li
- div
- table tr td
- pre
- hr