首先要知道,HTML不被视为一种编程语言,因为它不能执行编程语言中常见的数学逻辑或其他功能。HTML是一种标记语言。
CSS 是用于网站的布局和设计样式表语言。CSS与HTML一般结合使用。
一个<h1>指定的东西作为一个页面上最重要的标题,另外还有h1到h6
<p>段落内容</p>
<img src="图片地址">
<a href="链接地址">点击我进入链接</a>
我们可以为元素赋予唯一的id或class属性,以便我们可以在CSS代码中专门针对它们并设置其样式。
页面结构:
<!DOCTYPE html> 告诉浏览器我们正在使用HTML5代码
<html>
<head> head标签放置了与HTML文档有关的元数据,也是对外部样式表,字体和脚本的引用的地方
<title>Page Title</title>
</head>
<body>
正文内容
</body>
</html>
div元素
HTML元素<div>表示文档中的分区或部分。它用于将页面上的内容分为“块”或“板块”
<div>
<h1>Hello World!</h1>
<p>Example paragraph</p>
</div>
我们可以将页面中的元素包装在div元素内,然后使用CSS设置页面的样式。
原则上,<div>仅当没有其他语义元素合适时才应使用该元素。
有序列表(带有数字编号):
<ol>
<li>Red</li>
<li>Orange</li>
<li>Yellow</li>
</ol>
无序列表(带有符号点):
<ul>
<li>Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
合并和嵌套的例子:
<h4>My Color List</h4>
<ol>
<li>Red</li>
<li>Orange</li>
<li>Yellow
<ul>
<li>Sunflower</li>
<li>Banana
<ol>
<li>Frozen Banana</li>
<li>Non-Frozen Banana</li>
</ol>
</li>
</ul>
</li>
</ol>
table表格,每个表格行由<tr>
元素指定,每个单元格由<td>
元素指定。
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lassie</td>
<td>10</td>
<td>Rough Collie</td>
</tr>
<tr>
<td>Hector</td>
<td>6</td>
<td>German Shepherd</td>
</tr>
</tbody>
</table>
<form>元素用于创建表单,可以使用文本字段,单选按钮,复选框,下拉菜单,提交按钮以及许多其他类型的输入来填写表单。
<form action="/login" method="POST">
<label for="username">Username:</label>
<input id="username" type="text">
<label for="password">Password:</label>
<input id="password" type="password">
<button>Login</button>
</form>
如何添加CSS?
推荐使用外部css
首先将CSS写入以.css扩展名结尾的文件中。在HTML文档中包括这些样式。要链接到我们的HTML文档中的外部CSS文件,请使用<link>元素,该元素具有href引用CSS文件路径的属性
<html>
<head>
<title>示例标题</ title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>测试标题</h1>
</body>
</html>
颜色
h1 {
color: red;}
h2 {
color: #FF0000;}
h3 {
color: rgb(255, 0, 0);}
一些最常用的与文本相关的CSS属性包括:
font-family –更改目标文本的字体
字体大小 –控制字体的大小
font-weight –控制字体的粗细(例如,我们可以使用此属性制作粗体文本)
行高 –控制一行文本占用多少空间
文本对齐 –设置文本的对齐方式(左,右,居中)
文本装饰 –在文本上添加装饰线条{font-family:“ Arial”,sans-serif; font-size:20px; font-weight:粗体; 行高:2;文本对齐: 居中;文字装饰:下划线;}
CSS中,有三种主要的选择器类型:元素选择器,类选择器和id选择器。
元素选择器,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
类选择器,我们可以使用HTML 类属性为一个或多个元素提供一个类,然后将该类用于定位那些用该类标记的元素,并在CSS中对其进行样式设置。
类选择器以点.
前缀开头,后跟我们要定位的类名称
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
*.important {color:red;}
或者
.important {color:red;}
ID选择器,当我们要定位页面上的单个唯一元素时,可以在HTML中为其指定id属性。我们可以使用指定的id通过CSS定位唯一元素,并为其指定样式。
<p id="intro">This is a paragraph of introduction.</p>
*#intro {font-weight:bold;}
ID选择器以哈希#前缀开头,后跟唯一的ID名称。
注意,id属性在页面上应该是唯一的。在HTML文档中,我们不应多次使用单个ID。如果我们需要定位多个元素,则应使用一个类 来定义和定位所有元素 。
此外,还有属性选择器等