html入门(一)css样式及html标签

最近闲来无事,看看很多关于html入门的一些书籍,在此我将此整理了一下写一个整理大纲出来,希望对初学者有所帮助。

  1. 软件主要分两种架构C/S和B/S
  2. B/S中的B指的是browsers,是浏览器的意思,S值Server指服务器的意思
  3. 根据W3C标准,一个网页主要由三部分组成:结构(html)、表现(css)还有行为(JavaScript)。
  4. 一个最基本的HTML页面:
<!DOCTYPE  html>
<html>
<head>
    <meta  charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>网页正文</h1>
</body>
</html>
  1. <标签名>标签内容<\标签名>

6.<h1>一级标题<\h1>
<h2>二级标题<\h2>
<h3>三级标题<\h3>
<h4>四级标题<\h4>
<h5>五级标题<\h5>
<h6>六级标题<\h6>

  1. <p>我是一个<em>段落</em></p>
    p也是一个元素,em是p的子元素,p是em的父元素。
    <em>斜体
  2. <h1 title="我是一个标题">标题</h1>
    <img src="网络连接或者本地路径" alt="名字描述" />
  3. id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值。
    class属性用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class。
    title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。
  4. html的注释方法
  5. <meat> 标签
    <meta charset="utf-8"> 设置页面的字符集
    <meta name="description" content=""> 设置网页的描述
    <meta name="keywords" content="H5,JaveScript,前端,python">
    <meta name="keywords" content=""> 设置网页的关键字
    <meta name="description" content="发布H5,js,python等前后端相关信息">
    <meta http-equiv="refresh" content="5;url=地址"/>请求的重定向
    例如
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
    设置网页关键字有利于用户快速搜索到你的网站
  6. <head>标签用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。head标签作为html标签的子元素的出现,一个网页中只能有一个head。
  7. <title>标签表示网页的标题,一般会在网页的标题栏上显示。 title标签中的文字,是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。
  8. <body>标签用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。
  9. <br />标签表示一个换行标签,使用br标签可以使br标签后的内容另起一行。
  10. <hr />标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。
  11. <a>标签是超链接标签,通过a标签,可以快速跳转到其他页面。
    href 指向一个链接地址
    target 设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口。
  12. 字体颜色
    <font size="3" color="red">This is some text!</font>
    <font size="2" color="blue">This is some text!</font>
    <font face="verdana" color="green">This is some text!</font>
  13. <a href="http://baidu.com" target="_blank">百度一下</a> 跳转到新的页面

css

层叠样式表 (Cascading Style Sheets)
css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式.

  1. 行内样式
    <p style="color: red;font-size: 30px"></p>
  2. 内部样式表
    <style>
    p{color:red; font-size: 30px;}
    </style>
    这样使css独立于html代码,而且可以同时为多个元素设置样式,这是我们使用的比较多的一种方式。
  3. 外部样式表
    可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。
    <link rel="stylesheet" type="text/css" href="style.css">
    这种方式将样式表放入到了页面的外部,可以在多个页面中引入,同时浏览器加载文件时可以使用缓存,这是我们开发中使用的最多的方式。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,710评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,485评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,175评论 0 0
  • 不知道从什么时候开始,心里竟然牵挂着你,总想着你在另一个城市过得怎么样。生命中有人牵挂是幸福的,不管是你牵挂...
    司空逸羽阅读 4,655评论 1 4
  • 英语学习在我们的学校生涯中一直占了很大的比例,但始终是“重读写,轻听说”,导致许多人学了多年英语,口语还是很渣。 ...
    零珑心阅读 14,288评论 0 5

友情链接更多精彩内容