1.介绍HTML的结构
首先我在简单使用Sublime进行HTML的编辑,然后我就简单介绍一点入门的感受。
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
HTML的最基本主体就是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
这个是最基础的内容,<head>等标签作用基本都是本单词的含义,但也有些标签因为习惯使用,<b>和<strong>作用都是使字体加粗.
<!DOCTYPE>定义的是文档类型。
<html>定义的是文档的根。
<head>元素包含了所有的元信息(,这些信息不会直接显示在页面上,但对网页的渲染和行为至关重要。
<body>元素包含了网页的所有可见内容,如文本、图像、链接、列表、表格、表单等。这些内容会直接在浏览器中显示给用户。
<title>的作用就是网页的标题,其实你写HTML文本就是在写一个网页。
2.HTML的常用标签
在介绍标签之前,我们可以看到元素分为内外层。标签分为两类,一类是单标签<br>,一类是双标签,大部分标签都是双标签。
在上面简单介绍了HTML的基本格式,我们接下来说说HTML重要用到的标签
<h1>内容</h1>,h1标签作用网页里面的标题
<p></p>定义的是段落
<br />的作用就是让段落换行,
<hr />的作用是让段落之间有分割线
<b> | 定义粗体文本。 |
<em>它的作用就是使你写的文字变成斜体
<b></b><strong></strong>标签都是使字体加粗
<u></u><ins></ins>标签都是在文字下面出现下划线
<s></s><del></del>是删除线标签
<ol>
<li></li>
</ol>无序列表标签
<ul>
<li></li>
</ul>有序列表标签
<dl>
<dt></dt>
<dd></dd>
</dl>自定义列表标签,dt里面定义的是标签,dd里面定义的是内容
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table><tr><td>这三个都是表格标签,<th>是表头单元格格式,
<a href=""></a>
<img src=""alt="">
<form></form>
<input />type="text/password/radio/checkbox"/>
表单元素基本标签-输入与选择
文本框:type="text"
密码框:type="password"
单选框:type="radio"
复选框:type="checkbox"
3.HTML的全局属性
accesskey | 规定激活元素的快捷键。 |
class | 规定元素的一个或多个类名(引用样式表中的类)。 |
contenteditable | 规定元素内容是否可编辑。 |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
data-* | 用于存储页面或应用程序的私有定制数据。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定元素是否可拖动。 |
dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
enterkeyhint | 规定虚拟键盘上 enter 键的文本。 |
hidden | 规定元素仍未或不再相关。 |
id | 规定元素的唯一 id。 |
inert | 规定浏览器应忽略此部分。 |
inputmode | 规定虚拟键盘的模式。 |
lang | 规定元素内容的语言。 |
popover | 规定弹出框元素。 |
spellcheck | 规定是否对元素进行拼写和语法检查。 |
style | 规定元素的行内 CSS 样式。 |
tabindex | 规定元素的 tab 键次序。 |
title | 规定有关元素的额外信息。 |
translate | 规定是否应该翻译元素内容。 |
4.<input>类型
<input>
标签定义输入字段,用户可以在其中输入数据。
<input>
元素是最重要的表单元素。
<input>
元素可以以多种方式显示,具体取决于 type属性。
以下是不同的输入类型:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(默认值)<input type="time">
<input type="url">
<input type="week">
5.CSS引入方式
- 内联样式(Inline Styles):直接在HTML元素中使用
style
属性来定义CSS样式。这种方式主要用于单独对某个元素进行样式定义,但不建议大量使用,因为它违反了内容与样式分离的原则,且不利于样式的复用和维护。 - 内部样式表(Internal Styles):在HTML文档的
<head>
部分使用<style>
标签来定义CSS样式。这种方式适用于单个HTML文档的样式定义,但仍然不够灵活,不利于样式的复用。 - 外部样式表(External Styles):创建一个单独的
.css
文件,然后在HTML文档中使用<link>
标签引入。这是最常用的CSS引入方式,因为它实现了内容与样式的完全分离,有利于样式的复用和维护。
6.CSS选择器
- 简单选择器(根据名称、id、类来选取元素)
- 组合器选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
接下来我将着重说明一下简单选择器的内容:
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
HTML 元素也可以引用多个类。类不能以数字开头。
7.CSS简单样式
设计字体样式
body { | |
font-family: Arial, sans-serif; /* 设置字体 */ | |
font-size: 16px; /* 设置字体大小 */ | |
color: #333; /* 设置字体颜色 */ | |
|
设置文本对齐方式
p { | |
text-align: center; /* 文本居中 */ | |
} |
设计背景颜色和照片
body { | |
background-color: #f0f0f0; /* 设置背景颜色 */ | |
background-image: url('background.jpg'); /* 设置背景图片 */ | |
} |
设置元素的高度
div { | |
width: 300px; /* 设置元素宽度 */ | |
height: 200px; /* 设置元素高度 */ | |
} |
div { | |
border: 1px solid #000; /* 设置边框宽度、样式和颜色 */ | |
} |
设计内边距和外边距
div { | |
padding: 10px; /* 设置内边距 */ | |
margin: 20px; /* 设置外边距 */ | |
} |
设置元素的显示方式
div { | |
display: inline-block; /* 设置元素以内联块级元素的方式显示 */ | |
} |
设置元素的透明度
div { | |
opacity: 0.5; /* 设置元素透明度为50% */ | |
} |
设置元素圆角
div { | |
border-radius: 10px; /* 设置元素圆角 */ | |
} |
设置元素的阴影
div { | |
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置元素阴影 */ | |
} |
8.CSS简单定位方法
CSS中的定位方法主要有四种:静态定位(Static Positioning)、相对定位(Relative Positioning)、绝对定位(Absolute Positioning)和固定定位(Fixed Positioning)。
- 静态定位(Static Positioning):
- 这是CSS中元素的默认定位方式。
- 元素按照HTML文档流的顺序进行排列,不受任何定位属性的影响。
- 在静态定位下,
top
、right
、bottom
和left
属性无效。
- 相对定位(Relative Positioning):
- 元素相对于其正常文档流中的位置进行定位。
- 可以通过设置
top
、right
、bottom
和left
属性来调整元素的位置。 - 即使元素被移动,它仍然保留其在文档流中的空间。
- 绝对定位(Absolute Positioning):
- 元素相对于最近的已定位祖先元素(而非正常的文档流)进行定位。
- 如果没有已定位的祖先元素,它会相对于初始包含块进行定位。
- 绝对定位的元素会从文档流中完全移除,不会影响或受到其他元素的影响。
- 固定定位(Fixed Positioning):
- 元素相对于浏览器窗口进行定位。
- 即使页面滚动,固定定位的元素也会始终保持在窗口的同一位置。
在使用这些定位方法时,还需要注意以下几点:
position
属性用于设置元素的定位类型。top
、right
、bottom
和left
属性用于指定元素的位置。- 定位元素可能会脱离文档流,这取决于定位方法。
- 使用定位时,要注意元素之间的层叠关系,可以通过
z-index
属性来控制。