HTML基础标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/100696408

2019.09.09

入门基础

把前面安装完环境以后，我们就正式开始上手啦！！！打开sublime新建一个html文件，按住ctrl+！ tab一下，我们首先看到的是下面这样一串代码：

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

head部分

title标签是网页标签页的标题
为了减少内存，使html文档更简洁明了，可以使用link标签引入外部.css文件，使用script标签引入外部的.js文件，还可以引入所需的样式包

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="">
	<script type="text/javascript"></script>
</head>

body部分

body内的文本是可见的页面内容

为了渲染出漂亮的页面，我们会使用很多的标签和样式来美化它们。我们先来了解一下有哪些基础的标签吧

基础标签

标题标签

h1-h6 作用是使文章出现标题，它的特性是加粗，自己独占一行
h1 是最大的标题，就像我们word文档里的最大的字号一样，h6为最小的标题
一般h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3

<body>
	<h1>Hello I'm Taylor</h1>
	<h2>Hello I'm Taylor</h2>
	<h3>Hello I'm Taylor</h3>
	<h4>Hello I'm Taylor</h4>
	<h5>Hello I'm Taylor</h5>
	<h6>Hello I'm Taylor</h6>
</body>

在这里插入图片描述

段落标签

p标签的作用是可以把html文档分为若干段落
使用p标签时，浏览器会自动在其前后添加一行

<body>
	<p>今天是9月10日教师节</p>
	<p>教师节，旨在肯定教师为教育事业所做的贡献。在中国近现代史上，多次以不同的日期作为过教师节。直至1985年，第六届全国人大常委会第九次会议通过了国务院关于建立教师节的议案，才真正确定了1985年9月10日为中国第一个教师节。</p>
	<p>我们祝老师节日快乐！！！</p>
</body>

在这里插入图片描述

水平线标签

hr标签的作用是在html中创建水平线
我们也可以给它添加长、宽、颜色、阴影等样式

<body>
	<p>今天是9月10日教师节</p>
	<hr>
	<p>我们祝老师节日快乐！！！</p>
</body>

在这里插入图片描述
图像标签

img标签的作用是插入图片
而它的src属性的值是图片的路径
当图片加载不出来时跳出的提示文本，我们通常会用alt属性来实现
当鼠标悬停在图片上时显示的提示文本，我们用tittle属性来实现
我们还可以给img添加长、宽、边框样式

<body>
	<img src="Taylor Swift - Reputation Cover.jpg" alt="无法加载" title="快来支持Reputation！" width="300px" height="300px">
</body>

在这里插入图片描述
链接标签

a标签的作用是创建链接
其中href属性是规定链接的目标
name属性是规定锚的名称
target属性是定义被链接的文档在何处显示。_self在当前页面显示，_blank在新窗口显示，默认为_self

<body>
	<a href="https://www.w3school.com.cn/html/index.asp" target="_blank">点我</a>
</body>

列表标签

html支持有序、无序和自定义列表
有序列表始于ol标签，每个标签项始于li标签
无序列表始于ul标签，每个标签项始于li标签
自定义列表始于dl标签，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始

<body>
	<ol>
		<li>海绵宝宝</li>
		<li>派大星</li>
		<li>章鱼哥</li>
	</ol>
	<ul>
		<li>小明</li>
		<li>小红</li>
		<li>小兰</li>
	</ul>
	<dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>
</body>

在这里插入图片描述
路径

路径分为绝对路径和相对路径
绝对文件路径是指向一个因特网文件的完整 URL

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径指向了相对于当前页面的文件

<img src="/images/picture.jpg" alt="flower">

漫漫长路，这才第一天，感觉有点小累(ノへ￣、)

html基础入门（一）

2019.09.09

入门基础

基础标签