<!DOCTYPE html>
<!-- 申明文档类型,说明是html文档类型 -->
<html lang="en">
<!-- 说明我们写的是html标记语言 -->
<head>
<!-- 文件的头部,head里面写的是文档描述信息 -->
<meta charset="UTF-8">
<!-- 元信息,charset是编码格式,UTF-8国际性通用编码格式,gbk,gb2312 -->
<title>百度一下,你就知道</title>
<!-- 文档的标题,显示在状态栏上 -->
</head>
<body>
<!-- 文件的主体,所有页面内的可见内容都是放在body里面 -->
</body>
</html>
html语言分成两部分
标签(标记,元素)
长在尖括号后面的第一个单词
属性
长在标签后面,用空格隔开的那个单词
html文件分成两部分
头部
head,放描述性信息
主体
body,放可见的内容(结构)
html标签分成两种
常规标签(双标签)
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
空标签(单标签)
<标签名 属性1="属性值1" 属性2="属性值2">
标签名写在尖括号里面
属性和标签用空格隔开
属性和属性值用等号连接,属性值用引号包住
如果一个标签有多个属性,属性和属性用空格隔开
属性和属性是不分先后顺序的
1.标题标签(h1-h6)双标签
都加粗
h1到h6字体大小逐渐变小
标题标签都是独占一行
都有默认的上下间距
h1标签在同一个页面里面只能出现一次
seo,搜索引擎的优化
2.段落文本标签(p)双标签
每一个p标签独占一行
默认的上下间距
3.转义符号
空格
尖括号 < >
©
4.强制换行
<br> 单标签
5.水平分割线
<hr> 单标签
加水平分割线,强制换行
6.加粗标签 双标签
<b></b>
<strong></strong>
b标签为了加粗的样子而加粗
strong标签为了加强语气而加粗
7.倾斜标签 双标签
<i></i>
<em></em>
i标签为了倾斜的样子而倾斜
em标签为了加强语气而倾斜
8.扩展
<u>文本</u>下划线
<del>文本</del>删除线
<s>文本</s>删除线
<sub></sub>下标
<sup></sup>上标
9. 列表
无序列表
<ul>
<li></li>
<li></li>
</ul>
特点:每一个li都是独占一行
每一个li前面都有一个黑色的实心圆点(列表符号)
有序列表
<ol type="" start="">
<li></li>
<li></li>
</ol>
属性
type 默认值是1 1,2,3,4
a a,b,c,d
A A,B,C,D
i i,ii,iii,iv
I I,II,III,IV
start 从第几个开始 只能是数字
自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
图片标签 单标签
<img src="图片的路径" alt="" title="">
src:图片的路径,绝对路径或者相对路径
alt: 当图片因为网络原因或者自身损坏或者路径错误时,显示提示文字
title: 当鼠标悬浮时的提示文字
特点:
不是独占一行,从左往右排列
超链接
<a href="跳转的地址" target="_blank">文字或者图片</a>
href: 跳转的地址,前面必须有协议
target: _self 默认值,在当前页面打开
_blank 在新窗口打开
双标签
a标签里面可以是文字,也可以是图片
鼠标移入是默认会变成手指
从左往右排列
前端随笔初识前端HTML
最新推荐文章于 2024-08-24 09:46:30 发布