(一)HTML简介

简介: 1.语言介绍网页使用的建材都是HTML标签,然后用CSS进行装修。HTML是网页内容的载体,内容不只有文字,所以叫超文本。

1.语言介绍

网页使用的建材都是HTML标签,然后用CSS进行装修。


HTML是网页内容的载体,内容不只有文字,所以叫超文本。


CSS(Cascading Style Sheets)即层叠样式表,负责网页元素的样式与布局。


HTML由标签组成,<xxx>,HTML标签主要分两类,两边封闭的以及自封闭的。


(1)两边封闭的标签如:<html></html>  <head></head>  <title></title>  <div></div>等,都是成对出现的,其中第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)。


(2)自封闭的变迁如:<img> <meta> <input>等,都是单个出现的,并且刑如<xxx>。

标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<html>里嵌套<span>,那</span>必须放在</html>的前面。如:

<html><span>hello world</span></html>

2.HTML基本结构

“所有的房子都有一个相同的基本结构”

image.png

<html>
    <head>...</head>
    <body>主体</body>
</html>

其中,<html></html>是房子的地基,所有的建筑都要在地基上才能完成。


<head></head>是房子的头标签,它包含一些关于网页的信息。


在<body>和</body>标签之间的内容都是网页的主要内容,如果<h1>、<p>、<a>、<img>等网页内容标签,


<head>和</head>中间的部分包含了关于网页的各种属性和信息,通常这些信息是呈现给浏览器的,用户无法看到其内容。比如<link>标签定义了当前网页文件与外部资源的关系;<meta>可以用来定义网页使用的编码类型,还可以用来记录一些信息。例如:小明施工队偷偷在客户家的<head></head>标签里写下如下(类似“XX到此一游”)。

<meta name="author" content="小明出品">

<head></head>下的<title></title>中的内容,会被浏览器显示在窗口的标题栏上。<body></body>是网页内容的主题,它包含文档中诸如文本、超链接、图像、表格和列表等内容。

【常用标签描述】

image.png

大多数标签是有属性的,写法如<input id="1" value="1">或<a href="xxx"></a>,即属性名=属性值的形式。

【标签的常用属性描述】

image.png

3.标签基础

4.标签第一弹

<p>hello world</p>

<p></p>定义了一个段落。


5.初识CSS

CSS(层叠样式表)是用来表现HTML文件样式的计算机语言,就像网页的外衣。比如标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为CSS。


6.CSS改变样式

<p></p>标签中的字体变为红色(默认是黑色的)。

<style>p{color:red;}
</style>
<p>hello world</p>
相关文章
|
5月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
87 0
|
5月前
|
前端开发 JavaScript
HTML简介及基础标签
HTML简介及基础标签
57 0
|
4月前
|
前端开发
超文本标记语言(HTML)简介
超文本标记语言(HTML)简介
|
4月前
|
开发者
HTML 实体字符简介
HTML 实体字符简介
|
5月前
|
前端开发 JavaScript 开发工具
HTML简介
HTML简介
31 3
HTML简介
|
4月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
44 1
|
4月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
73 1
|
5月前
|
移动开发 Unix 定位技术
HTML 简介
HTML 简介
|
5月前
|
移动开发 HTML5
HTML 简介
HTML 简介。
39 3