前端开发基础教程-HTML教程和CSS教程
前端开发基础教程-HTML教程
html是超文本标签语言，又可以说是超文本标记语言，是基本功。html发展历史跳过。
html结构一般有<head>标签,<body>标签,网页的头部和内容，html的头部页面有标题，关键词，描述说明，不作内容来显示，但影响网页效果。
问：html是什么？
html是一种超文本标签语言，又是一种超文本标记语言，是基本功。
问：html一般结构是？
一般有<head>标签，<body>标签，为网页头部和网页内容。
问：头部标签具有什么？
头部标签有网页的标题，关键词，描述内如。
作用：不具备显示，但可以影响网页显示效果。
问：<body>是什么？
是用来显示实际效果内容的。
问：html注解格式？
<!-- 注释内容 -->html案例：
<!DOCTYPE html>
<html>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>DOCTYPE 用来声明文档类型
<html>标签为html网页的根元素
<head>标签为文档头部文件
<title>标签为文档的标题
<body> 标签为文档的主题
<h1> 标签为标题
<p> 标签为段落显示
问：什么是html?
html是超文本标记语言，它是使用一套标记标签的语言用来描述网页的，html文档可以说是web网页。
标签：开始标签和结束标签
<p>段落</p>案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>标题</h1>
</body>
</html>html标题通过h1到h6定义，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>数字越大，字体越小
段落表示：定义<p>标签
<p>段落</p>
<p>段落</p>链接：定义<a>
<a href="url"></a>html的图像定义标签<img>
<img src="文件名.jpg" width="200" height="200">案例：
<!DOCTYPE html>
<html>
<body>
<p>段落</p>
</body>
</html><body>元素定义了html文档的主体
<html>元素定义了整个html文档
在html中的属性是为了给html元素添加附加信息，如：
<a href="url"> </a> // href属性定义属性：
class 定义类名
id 定义唯一的id
style 定义
水平线<hr>
案例：
<p>段落</p>
<hr>
<p>段落</p>html的注解：
<!-- 这是一个注释 --><p> 定义段落<br/> 换行<b> 定义粗体<i> 定义斜体<em> 定义重文字<small> 定义小号字体<strong> 定义加重语气<sub> 定义下标字<sup> 定义上标字<ins> 定义插入字，下划线<del> 定义删除字<code> 定义计算机代码<kbd> 定义键盘码<samp> 定义计算机代码样本<var> 定义变量<pre> 定义预格式文本<abbr> 定义缩写<address> 定义地址<bdo> 定义文字方向<blockquote> 定义长的引用<q> 定义短的引用语<a href="#">文字</a><a href="#" target="_blank"></a><base> 标签描述了基本链接地址，蒂尼了所有链接标签的默认链接<head>
<base href="#" target="_blank">
</head><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head><meta http-equiv="refresh" content="30">CSS
p {color:red;text-align:center;}text-align:center;
.center {text-align:center;}
// 外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
// 内部样式表
<head>
<style>
p {margin-left:40px;}
</style>
</head>
样式优先级顺序
*
元素选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
腾讯云开发者
