HTML入门
- 网页的构成HTML:通常用来定义网页内容的含义和基本结构。
- CSS: 通常用来描述网页的表现与展示效果。
- JavaScript:通常用来执行网页的功能与行为
HTML的组成
HTML页面由一系列的元素(elements) 组成,而元素是使用标签创建的。
- 标签
一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。
例如:<h1> 今天是个好日子</h1>
- 属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中,加入属性。通常以 名称=值 成对的形式出现,比如:name=‘value’。
例如:<h1 align="center">今天是个好日子!!!</h1>
总结
- HTML是一种标记语言,用来组织页面,使用元素和属性
- 元素的主要部分
1.元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
2.开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
3.结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
4.内容(Content):元素的内容,本例中就是所输入的文本本身。
5.属性(Attribute):标签的附加信息。
基本语法
注释
<!-- <p>我在注释内!</p> -->
标签
空元素
不是所有元素都拥有开始标签,内容和结束标记。一些元素只有一个标签,叫做空元素。它是在开始标签中进行关闭的。
例子如下:
第一行文档<br/>
第二行文档<br/>
嵌套元素
<p>这是<b>第一个</b>页面</p>
块级和行内
1.概念
在HTML中有两种重要元素类别,块级元素和内联元素
-
块级元素
独占一行。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如
< p > < hr > < li > * < div > **等。 -
行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。比如
< b >,< a >,< i >,< span > 等。
2.div 和 span -
< div >是一个通用的内容容器,并没有任何特殊语义。它可以被用来对其它元素进行分组,一般用于样式化相关的需求。它是一个块级元素
-
< span >是短语内容的通用行内容器,并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素
注意:div和span在页面布局中有重要作用。
属性
标签属性,主要用于拓展标签。属性包含元素的额外信息,这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据,属性总是以name = value的格式展现。
- 属性名:同一个标签中,属性名不得重复。
- 大小写:属性和属性值对大小写不敏感。不过W3C标准中,推荐使用小写的属性/属性值。
- 引号:双引号是最常用的,不过使用单引号也没有问题。
- 常用属性:
特殊字符
中文空格 & emsp;
举例
1.div的class值
<style>
div { border: 1px solid blue;}
</style>
<div >left</div>
<div >center</div>
<div>right</div>
2.浮动
float:none;不浮动
float:left;左浮动
float:right;右浮动
<!-- 清除浮动 -->
clear:both;清除两侧浮动,
此元素不再收浮动元素布局影响。
设置背景
背景色:background-color: black;
背景图:background-image: url("../img/bg.png");
<!--// 文档声明-->
<!DOCTYPE html>
<!--// 根标签-->
<!--这里可以换成 "zh" 代表中文格式-->
<html lang="en">
<!--在这个标签里可以设置-->
<head>
<meta charset="UTF-8">
<title>csdn</title>
<!-- 在head里头写css文件的路径-->
<link rel="stylesheet" href="denglucss.css">
<!--或者在head里全套style标签 然后在style里写 -->
<style>
/* 1. 标签名{*/
/* 属性名:属性值;*/
/* }*/
/* */
/* 2. 标签名{*/
/* 属性名1:属性值1;*/
/* 属性名2:属性值2;*/
/* 属性名3:属性值3;*/
/* */
div {
width: 60%;
/*外间距*/
margin: auto;
}
/* 3. 标签名{*/
/* 属性名:属性值1 属性值2 属性值3;*/
/* } */
/* */
div {
border: 1px solid blue;
}
/* 这里与下面body标签中的 <div class="left">left</div> class属性相对应 */
.left {
/*在这里设置body中特有div标签的属性*/
background: red;
line-height: 30px;
}
</style>
</head>
<body>
<p> 文本标签 </p>
<h1> 标题标签 </h1> <!-- 分6级,h1~h6 -->
<ul> 无序列表</ul>
<ol> 有序列表</ol>
<li> 列表里的条目 </li>
<i>斜体标签</i> & <em>斜体标签</em>
<strong>加粗文本</strong> & <b>加粗文本</b>
<!--文字标签 size color-->
<font color="red" size="50px"></font>
<!--标签嵌套-->
<div><hr><em><font color="gray" size="2">哈哈哈</font></em></div>
<div class="left">left</div>
<!--src后代表着 图片的路径 alt 代表如果访问不到图片显示的内容-->
<img src="img1/logo.png" alt="你所选图片已不存在">
<!--超链接 href 后代表链接地址-->
<a href="#">啊哈哈</a>
</body>
</html>
CSS
概述
CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS)
简单的说,它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如,调整内容的字体,颜色,大小等样式,设置边框的样式,调整模块的间距等。
**选择器:**指定将要添加样式的 HTML元素的方式。可以使用标签名,class值,id值等多种方式。
声明:形式为属性(property):值(value),用于设置特定元素的属性信息。
属性:指示文体特征,例如 font-size,width,background-color。
值:每个指定的属性都有一个值,该值指示您如何更改这些样式。
定义
定义 : 层叠(级联)样式表 cascading style sheet
组成 : 选择器(selector),样式 style
引入方式
内联样式 : <标签 style=“样式:值;”> 优先级最高
内部样式 :<style> 选择器 { 样式:值; } </style>
外部样式 :
<link rel="stylesheet" href="css文件的路径">
选择器 (*)
- #id值 - 某一个元素时(优先级最高)
- .class值 - 某一类元素时
- 标签名 - 某一种标签,都会应用相同的样式(优先级最低)
1.元素选择器
页面元素
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
选择器:
选择所有li标签,背景变成蓝色
li{
background-color: aqua;
}
2.类选择器
3.ID选择器
选择器
#two{
background-color: aqua;
}
组合选择器
页面元素:
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
</ul>
</div>
1)后代选择器选择器:
.l1 li{
background-color: aqua;
}
2)子级选择器选择器:
.l1 > li{
background-color: aqua;
}
3)同级选择器选择器:
.l1 ~ li{
background-color: aqua;
}
4)相邻选择器选择器:
.l1 + li{
background-color: aqua;
}
小总结:
- 凡是class属性 就要 " . 属性 + 标签 "
- 使用ID 就得用" # + id "
- 标签就直接写
语义化标签
常见样式属性
Table标签
ps : tr > td
tr*3>th*5 + table键
快捷方式创建3行5列的表格