重学全栈日记之 — html(上)
ps: 主页(下)已发
目录:
备注
对于中文网需要使用此标签,否则可能会出现编码。
偶尔有些浏览器会设置GBK为默认编码<meta charset = "utf-8">
html后缀名:可以是“html”,也可以是“htm”
个人推荐使用vscode进行编写
了解html
HTML是一种超文本标记语言
(HyperText MarkupLanguage)
html 一般分为开放标签和闭合标签
示例: <p> </p> or <br />
基本结构展示:
<!DOCTYPE html> (声明为HTML5文档)
<html>
<head>
<meta charset = "utf-8">
<title> 我是帅哥 </title>
</head>
<body>
<h1> 我的第一个标题 </h1>
<p>我的第一个段落</p>
</body>
</html>
html基础
标题(
<h1>
、<img>
)h1~h6,一共有6级标签,
代码样式:<h1></h1>
,剩下可以同上,举一反三链接(
<a>
)可以转跳到别的网页上。其中 " href " 写入的是转跳地址
代码样式<a href="https://www.woshidashuaige.com"> </a>
图片(
<img>
)展示图片,width \ height 指代的是宽和高,src指代的是路径
代码样式:
<img src="/images/log.jpg" width="200px" heigth="140px">
html元素标签
元素标签
- 元素标签是以开始标签起始,结束标签终止
- 元素的内容是在 开始标签 和 结束标签 之间
- 某些元素标签有 空内容 (空标签指代的是没有内容的标签)
- 大多数HTML元素可拥有 属性
示例:
<p> 我是一个段落标签。 <p>
元素标签是可以进行嵌套的,例如:
<html> <body> <p>我是一个段落标签。</p> </body> </html>
水平线标签(
<hr>
、<br>
)
<hr />
水平线标签
这是一个单标签,和双标签(例如:<p>我是双标签</p>
)有不同的风格
<br />
换行标签html属性
html是可以给元素增加属性的,例如
示例:<a href = "www.woShiShuaiGe.com">我是一个大帅哥</a>
其中 href 便是所 增加 的属性值。(大白话:就是增加某个元素的新特性)比如:class类属性、id属性、name属性……等等
标题
标题样式(
<h1>
~<h6>
)示例:
<h1>标题</h1>
标题有 1~6 级,分别是 h1 ~ h6,下面展示一下 h1 的标题展示我是h1标题展示
注释
代码:
<!-- 这是一个注释 -->
是可以进行 备注、标记 等注释,是可以 不被执行 的代码
格式化标签
常用文字属性标签:
<b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <del> 定义删除字
链接语法
链接(
<a>
)
<a href="www.woshishuaige.com" > 我是帅哥 </a>
属性:
href 目标链接地址 target属性(可选) _blank:新标签打开
_self:当前窗口打开title(可选) 鼠标放上的悬停提示
头部
- 定义提了HTML文档的标题 - 定义了所有 当前默认的链接地址
示例:
<head>
<style type = "text/css" >
body {
background-color : yellow ;
}
</style>
</head>
标签 – 描述了一些基本的元数据
以下示例:
为搜索引擎定义关键词:
<meta name="keywords" content= >"HTML,CSS,XHTML,JavaScript" >
为网页定义描述内容:<meta name="description" content="我是一个大帅哥">
定义网页作者:<meta name="author" content="我的名字">
每30秒钟刷新一下页面:<meta http-equiv="refresh" content="30">
css样式(了解:在html4之后开始使用)
1.行内样式:
<p style="color: red; background-color: yellow"> 我是一个大帅哥 </p>
2.内部样式:
<head> <style> body { background-color: blue; } p { color: yellow; } </style> </head>
3. 外部样式表
<head> <link rel="stylesheet" type="text/css" href="myStyle.css"> </head>
图像(<img>
)
<img src="url地址" alt="如果图片显示不出来的话,我就会出来告诉大家" width="宽" height = "高">