专栏首页达达前端前端开发基础教程-HTML教程和CSS教程

前端开发基础教程-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 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第59节:Java中的html和css语言

    html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.

    达达前端
  • vue框架入门和ES6介绍

    vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等。

    达达前端
  • Day1:html和css

    浏览器内核:浏览器分两个部分,一个是渲染引擎(layout engineer 或者 Rendering Engine)和js引擎.

    达达前端
  • salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)

    项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考。 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔...

    用户1169343
  • HTML学习笔记——心动不如行动

    ----------------------------------------------------------------------

    泰斗贤若如
  • 第59节:Java中的html和css语言

    html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.

    达达前端
  • HTML|制作表单、布局

    在我们的日常工作和学习中,我们经常会需要使用某些网站的功能,这时就会面临需要注册该网站的账号。而在注册的时候,会让我们填写一个个人信息表,这样的一个网页就可以用...

    算法与编程之美
  • 学习网页制作其实并不难

    雨尘
  • HTML|制作注册个人信息填写表

    在我们的日常工作和学习中,我们经常会需要使用某些网站的功能,这时就会面临需要注册该网站的账号。而在注册的时候,会让我们填写一个个人信息表,这样的一个网页就可以用...

    算法与编程之美
  • Javascript中String对象的的简单学习

    第十一课 String对象介绍 1:属性     在javascript中可以用单引号,或者双引号括起来的一个字符当作     一个字符对象的实例,所以可以在某...

    别先生

扫码关注云+社区

领取腾讯云代金券