1 Html简介
1.1 什么是Html?
Hyper Markup Language 超文本标记语言
标记网页的一种语言
1.2 Html是用来干嘛的?
用来方便程序员编写,浏览器识别以及渲染
2 Hello World
2.1 挑选合适的浏览器
推荐chrome 谷歌浏览器
2.2 挑选合适的开发工具
VS Code 下载地址
2.3 基本的HTML文档*
<!doctype html> <!--告诉浏览器这是个HTML文档-->
<html>
<head></head>
<body>
<p>Hello World</p>
</body>
</html>
现在流行移动优先,最基本的HTML骨架
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页在浏览器显示的标题</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2.4 父元素、子元素、后代元素和兄弟 元素*
像 这些叫做元素 ,也称作标签
<body>
<div>1
<p>hello world</p>
</div>
<div>2</div>
<div>3</div>
</body>
如上:
每个 div 的父元素是 body
body 的子元素有 div1 , div2 , div3
p 和 div 都是 body 的后代元素
div1 , div2 , div3 是互为兄弟元素
2.5 注释
以 <!--开始,以--> 结束的代码
2.6 HTML属性
类似
<div id="idname" class="classname"></div>
里的id和class是div标签的属性,属性值为双引号里面的值
2.7常用字符实体(了解)
3 常用标签
块级元素,宽度默认为整个页面宽度,高度随内容而定,独占一行 从上到下排列
可以看作是一个容器
<div>这里是一个容器</div>
3.2 span
行内元素,从左到右排列,表示一小块,多个span可以在同一行显 示
<span>一周热门排行榜</span>
3.3 h1-h6
标题,从h1到h6为从大到小不同大小的标题文字
3.4 p
段落标签,里面的内容就是一个段落,独占一行
3.5 ul li无序列表
ul 是声明有一个无序列表
li 包含每一列表的内容
默认情况下每一列表独占一行
ol 有序列表
<ul>
<li>我是第一列</li>
<li>我是第二列</li>
</ul>
3.6 img
图片标签,有一个属性是src为图片地址,alt属性是在图片没有正式 加载的时候显示的内容
<img src="../logo.png" alt="我是一张图片">
3.7 a
<a href="http://www.baidu.com/" target="_blank"> 百度一下</a>
表示一个链接 ,href="http://www.baidu.com/“里的内容就是要跳 转的链接,加上target=”_blank"表示弹出新的窗口打开这个链接, target属性不写的话默认是在本窗口打开链接
3.8 form 表单
<form>
<fieldset>
<legend>我是表单标题</legend>
</fieldset>
</form>
3.9 input
<input type="text" value="Kevin">
<input type="password" placeholder="请输入密码">
<input type="button" value="登录">
type属性表示输入框的类型,text是文本输入框,password是密码 输入框,button表示一个按钮
value属性表示输入框里面的内容
placeholder属性表示占位字符,做提示用。
3.10 button
<button>登录</button》
3.11 select > option
下拉选框
<select>
<option value="">成都</option>
<option value="">北京</option>
<option value="">上海</option>
</select>
select声明下拉选择框,option是选项,value表示选项的值
基本学会这些基础,做个简单的前端应该没问题了