【初入前端】第一课课前预习

一、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> 地址

感谢您的浏览！