HTML 是什么:即 HyperText Markup language 超文本标记语言,咱们熟知的网页就是用它编写的,HTML的作用是定义网页的内容和结构
- HyperText 是指用超链接的方式组织网页,把网页联系起来
- Markup 是指用<标签>的方式赋予内容不同的功能和含义
CSS 是什么:即 Cascading Style Sheets 级联样式表,他描述了网页的表现和展示效果。
1. HTML 元素
HTML 由一系列元素 elements 组成,例如
<p>Hello, world!</p>
- 整体称之为元素
- <> 和 </> 分别称为起始和结束标签
- 标签包围起来的 Hello,World 称之为内容
- P 是预先定义好的HTML 标签,作用是将内容作为一个单独的段落
元素还可以有属性,如
<p> id='p1'>Hello, world!</p>
- 属性一般是预先定义好的,这里的id属性是给元素的一个唯一的标识
元素之间可以嵌套,如
<p>HTML 是一门非常<b>强大</b>的语言</p>
不包含内容的元素称为空元素,如<img src='1.png'>
img 作用是用来展示图片
src 属性用来指明图片路径
2. HTML 页面
前面介绍的只是单独的HTML元素,它们可以充当一份完整的HTML页面的组成部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页1</title>
</head>
<body>
<h1>这是网页1</h1>
<p>这是与本页相关的<a href="2.html"></a></p>
<p><a href=""></a></p>
</body>
</html>
- html 元素囊括了页面中所有其他元素,整个叶念只需一个,称为根元素
- head 元素包含的是那些不用于展现内容的元素,如title, link, meta
- body 元素包含了对用户展现内容的元素,例如后面学到的用于展示文本,图片,视频,音频的各种元素。
3. 常见元素
3.1 文本
Heading
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
Paragraph<p>段落</p>
List
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
多级列表
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
Anchor
锚,超链接<a href='网页地址'>超链接文本</a>
<a href='页面标签名称'>超链接文本</a> 页面内锚点
3.2 多媒体
image
<img src='文件路径'>
src 格式有三种
- 文件地址
- data URL
data: 媒体类型; base64,数据 - object URl
Video
<video src='视频文件路径'></video>
Audio
<audio src='音频文件路径'></audio>
3.3 表单
表单的作用:手机用户填入的数据,并将这些数据提交给服务器
表单的语法
<form action='服务器地址' method= '请求方式' enctype='数据格式'>
<!-- 表单项 -->
<input type='submint' value='提交按钮'>
- method 请求方式有
get 默认 提交时,数据跟在 URL 地址之后
post 提交时,数据在请求提内
enctype 在post 请求时,指定数据的格式
application/x-www-form-urlencoded 默认
multipart/form-data
其中表单项提供多种收集数据的方式
有name属性的表单项数据,才会被发送给服务器
4. CSS
即 Cashcading Style Sheets ,它描述了网页的表现与展示效果
4.1 选择器
- type 选择器-根据标签名进行匹配 (元素选择器)
- class 选择器- 根据标签的class 属性进行匹配
- id 选择器 - 根据元素的id 属性进行匹配
属性和值
background-color: red;
布局