目录
一、HTML、CSS、JS 简介
- HTML
- CSS
- JS
二、HTML常用标签
- 文件标签
- 链接标签
- 图像标签
- 表格标签
- 列表标签
- 表单标签
- 其他标签
一、HTML、CSS、JS简介
1、HTML
- HTML 指的是超文本标记语言(Hyper Text Markup Language)
- HTML 不是编程语言,是一种标记语言
- 标记语言是一套标记标签
- HTML 使用标签来描述网页
2、CSS
-
CSS指的是层叠样式表(Cascading Style Sheet)
-
CSS是一组样式设置的规则,实现内容与样式的分离
-
CSS用于页面外观美化、布局和定位
3、JS
- JS指的是JavaScript ,是一门面向 Web 的编程语言
- JavaScript 是一种轻量级的编程语言
- JavaScript 是可插入 HTML 页面的编程代码
-
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
二、HTML常用标签
1、文件标签
<!DOCTYPE html>
<html>
<head>
<title>CSDN博客(mp.csdn.net)</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
【1】<html> 标签
【2】<head> 标签
【3】<title> 标签
【4】<body> 标签
- 常用属性:text:用于设定文字颜色; background:用于设定背景图片; bgcolor:用于设定背景颜色
【5】<p> 标签
- 常用属性:align 用于设定对齐方式,有 left、right、center,默认 left
2、链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客(mp.csdn.net)</title>
</head>
<body>
<p><a href="https://www.csdn.net/">本文本</a> 是一个指向CSDN上的页面的链接。</p>
</body>
</html>
<a> 超链接
- 常用属性:
href:用于设定链接指向页面的 URL
name:用于设定锚的名称
页面内部的锚连接 <a href="#名称"></a>
页面间的锚连接 <a href="页面的地址#锚名"></a>
target:用于设定在何处打来链接页面
_self:自身打开页面(默认) _blank:新窗口打开
3、图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客(mp.csdn.net)</title>
</head>
<body>
<h2>挪威山旅行</h2>
<img border="0" src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
</html>
<img> 图形标签
- 常用属性:
src:用于设定要引入的图片的URL
alt:用于设定图像的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:用于设定图片边框厚度
align:用于设定图片的文字对齐方式(center/right)
4、表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客(mp.csdn.net))</title>
</head>
<body>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
【1】<table> 表格
- 常用属性:align、bgcolor 、border 、width
【2】<tr> 表格的行
- 常用属性:align、bgcolor
【3】<td> 表格的列
- 常用属性:align、bgcolor、height、width
【4】<caption>表格标题
- <caption> 标签必须紧随 <table> 标签之后
- 一个表格只能有一个标题,通常这个标题会被居中于表格之上
【5】<th> 表格表头
- 内部的文本通常呈现为居中加粗文本
5、列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客(mp.csdn.net)</title>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
</body>
</html>
【1】<ul> 无序列表
- 常用属性:type:规定列表的项目符号类型,可取值:disc、square、circle,默认为 disc
【2】<li> 列表项
- 常用属性:
type:只适用于无序列表,用于设定项目符号
value:只适用于有序列表,用于设定列表的项目数字
【3】<ol> 有序列表
- 常用属性:type star:规定列表的起始值
【4】<dl> <dt> <dd> 自定义列表
6、表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN博客(mp.csdn.net)</title>
</head>
<body>
<form>
姓名: <input type="text" name="firstname"><br>
电话号码: <input type="text" name="lastname">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
【1】<form> 表单标签
【2】<input type="text">文本框
【3】<input type="submit">提交按钮
【4】<input type="reset">重置按钮
<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female
</form>
【5】<input type="radio"> 单选框
<form>
<input type="checkbox" name="vehicle" value="Bike">Bike<br>
<input type="checkbox" name="vehicle" value="Car">Car
</form>
【6】<input type="checkbox">复选框
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
【7】<select>下拉式复选框
默认:<option selected=selected>
【8】<option>选项
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
【9】<textarea>文本框,常用属性:cols rows 定义文本框大小
7、其他标签
【1】<br> 换行
【2】<hr> 水平线
【3】<!-- --> 注释
【2】<em> 斜体
【2】<strong> 粗体
【2】<ins> 插入
【2】<del> 删除
【2】<abbr> 缩写
【2】<address> 地址