文章目录
一 HTML+CSS的基本简介
1 、 什么是html和css 和js
（1）他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言
（2）HTML是通过代码把要显示的内容显示到网页上
CSS是对它的美观.比如加颜色.背景..排版什么的
JS是对它做特效的
（3）浏览器把源代码解析后的样子就是我们看到的网站
（4）F12或者ctrl+U查看网站的源代码
（5）一个网站是由N个网页组成的，每一个网页就是一个.html文件
2 、 怎么创建和打开一个html文件呢？
记事本写代码改后缀，拖到浏览器打开
3、使用vs code编译器
安装插件：中文包、open in browser(便于文件右键运行html网页)、
view in browser（便于在菜单中右键运行html）
设置->首选项->设置（大小，是否换行Word wrap）
学习编译器的基本使用：
（1）创建html文件、创建文件夹、重命名、删除、搜索
（2）ctrl+z 撤销 ctrl+y前进
(3) shift+end 在头选中一行 Shift+home 在尾选一行
(4) Shift +alt +↓或↑：往下/上快速复制
(5) Alt+↓或↑：快速移动一行
(6) Tab 缩进 shift+tab 缩推
(7) 多光标：alt+左键
(8) 选着相同的元素：Ctrl+d
(9) 创建标签的快捷键： 单词+tab
4、深入了解网站开发
（1）先UI设计师设计大概样子
（2）wed前段开发人员（h5开发）
根据UI提供的设计转为代码实现
数据库的数据显示到页面
Html+css+js:
Html: 负责网页的结构
css: 负责样式
Js: 行为、特效
（3）wed后端开发人员
二 HTML讲解
1、html的基本属性和属性
（1）Html: 超文本 标记 语言
（2）超文本：文本内容+非文本内容（图片、视频、音频等）
（3）标记（标签）： 单标签：<单词> 双标签：<header> </header>
单词+tab 补全标签
标签可以上下排列、也可以组合嵌套
标签的元素周期表：http://www.html5star.com/manual/html5label-meaning/
标签的属性：来修饰标签设置当前标签的一些功能
<标签 属性=” 值” 属性2=”值2”......>
语言：编程语言
2、html初始代码：
!DOCTYPE html> 文件声明：告诉浏览器是一个html文件
<html lang="en"> HTML的最外层标签：包裹着所有html代码
lang=”en”表示一个英文网站 lang=”zh-CN”代表一个中文网站
<head>
<meta charset="UTF-8"> 原信息：编写网页中的一些赋值信息 charset="UTF-8" 表示国际编码，让网页不出现乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置网页标题</title> 设置网站标题
</head>
<body>
显示网页内容
</body>
</html>
！+tab：快速创建html的初始代码
3、html注释
写法： <!-- 注释内容 -->
作用：解释提示作用
快捷键 ctrl+/ 或者 shift+alt+a
4、html语义化
根据网页中的内容结构，选着适当的标签 进行html标签的编写
好处：
\1. 没有css的情况下，页面也能呈现出很好的内容结构
\2. 利于SEO,让搜索引擎爬虫更好的理解网页
\3. 方便其他设备解析（比如：屏幕阅读器、盲人阅读器）
\4. 便于团队的开发于维护
5、标题与段落
（1）标签：
标签 --> 双标签 ： <h1></h1> ............ <h6></h6> 有6个等级
（2）段落：
段部 --> 双标签 <p></p>
（3）查看某一段的结构及其样式：
在网页的该位置处 --> 右键 --> 检查
6、文本修饰标签
文本修饰标签 --> 双标签
强调标签： <strong></strong> 加粗强调
<em></em> 斜体强调
上下标： <sup></sup> 上标：X2
<sub></sub> 下标：X2
插入删除文本：
<del></del> 删除文本（效果是文本中间有一个删除线）
<ins></ins> 添加文本（效果是文本下面有一个添加线）
7、图片标签与图片属性
<img 属性1 属性2 .....> 是单标签
src 图片地址路径
alt 当图片显示出现问题时候，会出现一段有好的提示文字
Title 当鼠标放上去的时候出现的提示信息
Width和height 宽和高（不设置时会根据图片的原来宽高处理，设置的好处：在 图片未加载出来之前会先预留出图片位置）
谷歌浏览器设置网速：
Network -> online -> 选择模拟网络
路径问题：
分为相对路径（从和该html文件相同目录开始./路径）和绝对路径
可以放网络图片路径，可以放电脑计算机的图片路径
./img/图片 当前目录的img下的图片
../ 上一次
路径 本文夹下的路径
8、跳转连接
<a></a> 双标签(中间写连接的对象)
href 连接地址
Target 可以改变连接打开的方式（默认情况：是在当前网页打开连接 _self
在新的窗口打开连接 _blank）
<base> 单标签（改变链接默认打开方式）--一般写到head里面
要学会给文字、图片加连接
9、跳转锚点
方式一:
<a></a>标签+href(#id)+设置id
给要引用的位置加id,在a标签的href选项中加#id
方式二：
<a></a>标签+href(#name)+设置<a></a>标签name
给要引用的位置新建标签<a></a>加name属性,在a标签的href选项中加#name
10、特殊符号
11、列表标签
（1）无序列表
<ul></ul> 列表的最外层容器
<li></li> 列表项
Type属性 改变前面标记的样式（一般由CSS控制）
他俩必须组合出现、他们之间是不能使用其他标签的（但li内部可以加其他标签）
<!-- 无序标签 -->
<ul>
<li><a href="#"><strong>第一项</strong></a></li>
<li><em>第二项</em></li>
<li><strong>第三项</strong></li>
<li><p>第四项</p></li>
</ul>
（2）有序列表（前面标记为列号）
<ol></ol> 列表的最外层容器
<li> </li> 列表项
Type属性 改变前面标记的样式（一般由CSS控制）
他俩必须组合出现、他们之间是不能使用其他标签的（但li内部可以加其他标签）
有序和无序使用方式大体相似。经常使用无序列表，有序用的很少
<!-- 有序列表 -->
<ol>
<li><a href="#"><strong>第一项</strong></a></li>
<li>第二项</li>
<li><strong>第三项</strong></li>
<li><em>第四项</em></li>
</ol>
（3）定义列表（列表项需要添加标题和对标题进行描述的内容）
<dl> </dl> 定义列表
<dt> </dt> 定义专业术语或者名词
<dd> </dd> 对名词进行解释和描述
一般dl为最外层，里面dt和dd交替使用
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>javaScript</dt>
<dd>网页脚本语言</dd>
</dl>
（4）列表嵌套：
列表之间可以相互嵌套，形成多层次的列表
<!-- 列表的嵌套 -->
<dl>
<li>
<strong>安徽省</strong>
<ol>
<li>黄山</li>
<li>合肥</li>
<li>安庆</li>
<li>芜湖</li>
</ol>
</li>
<li>
<strong>山东省</strong>
<ol>
<li>济南</li>
<li>泰安</li>
<li>青岛</li>
<li>潍坊</li>
</ol>
</li>
</dl>
12、表格标签及其属性
（1）标签
<table></table> 表格的最外层容器
<tr></tr> 定义表格行
<th></th> 定义表格头
<td></td> 定义表格单元
<caption></caption> 定义表格标题
之间是嵌套关系，要符合嵌套规范
语义化标签： <tHead> <tBody> <tFood>（不具有效果，只有进行规范）
（2）表格的属性
Border 表格边框（对table进行操作）
Cellpadding 单元格内的空间（对table进行操作）
Cellspacing 单元格之间的空间（对table进行操作）
Rowspan 行合并单元格（对td进行操作）（相当于横着占两单元格）
Colspan 列合并单元格（对td进行操作）（相当于竖着占两个单元格）
Align（left、center、tfood） 左右对齐方式（对tr、tHeaddeng操作）
Valign（top、middle、bottom） 上下对齐方式（对tr、tHead等操作）
13、表单标签
<form></form> 表单最外层容器（创建 HTML 表单，表单用于向服务器传输数据）
属性：
action 指定提交到哪一个URL中
method 发送数据的方式（get、post）
name 规定表单的名称
enctype 规定在发送表单数据之前如何对其进行编码（text/plain等等）
(1) <input> 单标签
标签用于收集用户信息，根据不同的type属性值，展示不同的控件。
比如说：输入框、密码框、复选框
<h2>输入框</h2> //输入框中placeholder属性可设置提示信息
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>//checked该选项初始化为已经选择,disabled为选项不可选
<input type="checkbox" checked>苹果
<input type="checkbox">香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>//加上相同的name，相当于化分为一个组，一个组只能选一个
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮</h2>//该form下的全部提交到form指定的位置
<input type="submit">
<h2>重置按钮</h2>//该form下全部重置
<input type="reset">
</form>
(2) 单标签
多行文本框（cols设置 rows设置行数）
(3)下拉菜单 （size属性，开始显示几个选项）
<select> 下拉菜单的外层
<option> 下拉菜单的每一项
(4)可选着的范围变大：辅助选择
<label></label> 设置for属性，设置某一个选项的id，点击该内容相当于点击该选择
(5)常见的属性：
action 设置form的提交位置
Placeholder 设置输入框、密码框的提示信息
Checked 设置复选宽，单选框，下拉菜单中的一项为初始选项
Disabled 设置为不可选的选项 单选框 多选框 下拉菜单
Multiple 设置为多选. 上传文件、下拉菜单
Selected 设置为第一个选项 下拉菜单
单选框通过相同的name进行分为同一组
<form action="提交的位置">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select size="3" > <!--multiple设置为多选-->
<option selected disabled>请选择</option>
<option >北京</option>
<option >上海</option>
<option >杭州</option>
<option >广东</option>
<option >深圳</option>
<option >南京</option>
</select>
<h2>辅助选择</h2>
<input type="radio" id="111"><label for="111">男</label>
</form>//辅助选择根据其for属性找其id相同的进行辅助选择
14、注意
<div> 标签
分隔、分区，用来划分一个区域，相对于一块区域容器，可容纳段落、标题、表格像 素等
网络元素.div中可以嵌套div，将网页分割成独立的、不同的部分。来实现网页的 规划与布局。
<span>标签
用来修饰文字的
div和span没有默认的样式，需要配合CSS使用才行
扫一扫
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
