2019前端「HTML+CSS」零基础入门之 HTML学习笔记
2019前端「HTML+CSS」零基础入门
课时1 课程向导
前端三大基础语言：HTML CSS JavaScript
其次要学习：jQuery 网络 CSS3 H5 es6 webpack4.0 git 小程序 设计模式 VUE VUEX VUE源码 React Node.js Mongo DB数据库等等
课时2 html 初级篇 - 基础标签
HTML（hyperText markup language 超文本标记语言）
<html>根标签</html>
<html>
<head>编辑浏览器的特性</head>
<body>展现给用户看</body>
</html>中文-乱码时使用 <meta charset="utf-8"> 即可解决
编码常用字符集：
gb2312(亚裔字符集不包括繁体)-->gbk(亚裔字符集包括繁体)
unicode(万国码)-->升级码-->utf-8
<html lang="en,zh">language=English:告诉搜索引擎爬虫我们的网站是关于什么内容的</html>
SEO：搜索引擎优化技术，符合爬虫喜好
<meta content="服装" name="keywords">
<meta content="这是一个你穿了就不想脱的衣服" name="description">
<title>网页标题标签</title>
<p>this is a paragraph 段落标签</p>
<h1>标题</h1>
<h2>标题</h2>
.逐
.次
.小
<h6>标题</h6>
<strong>加粗</strong>
<em>斜体</em>
<del style="color: #CCCCCC;">¥50(添加中划线)</del>
<address>地址标签(成段落展示+斜体)</address>
规格化容器：<div>独占一行</div> <span>无作用</span>(分块明确、结构化)
<html>
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<p></p>
<h1-6>依次减小，加粗段落展示</h1-6>
<strong><em>标签嵌套</em></strong>
容器(绑定化操作)：<div></div><span></span>
</body>
</html>课时3 html 进阶篇 - 高级标签
<div style="width: 100px;height: 100px;background-color: red;">kjbvjbxASDBcsd bnxcbvnxbvcnxvzvbhjvsadfv</div>
显示：不会自动换行，会越出红色矩形，因为一个单词无法分割 空格->英文单词分隔符
html编码： 代表空格
接下来我要给大家讲解一个标签，叫<div> (<div>)
<br>换行标签
标签正常来说成对出现，为了修饰包裹的内容；不需要修饰的标签->单标签
<hr>代表水平线
有序列表：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
默认阿拉伯数字作为序号；
<ol type="1"/"a"/"A"/"i"/"I"(排序标号类型) start="117(从第几个开始)">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol reversed="reversed"(倒着排序)>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表：
<ul type="disc(默认)/square/circle">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
一个大功能有很多个功能子项组成，例如信息导航栏。追求可维护性、通用性。
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
margin: 0 10px;
float: left;
color: #FF4400;
font-weight: bold;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
li:hover{
border-radius: 15px;
background-color: #FF4400;
color: #FFFFFF;
}
</style>
</head>
<body>
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</body>
</html><img src="images/icon.png" style="width: 200px;"
alt="图片占位符：这是出错后图片的位置上显示的内容"
title="图片提示符">
1.网上url
2.本地的绝对路径
3.本地的相对路径
<a href="hyperText reference：超文本引用" style="...">a标签</a>
在新标签页中打开：
<a href="hyperText reference：超文本引用" style="... target="_blank" ">a标签</a>
anchor -- 锚(原始作用：作为锚点记录位置)
<div id="demo1" style="" >demo1</div>
<div id="demo1" style="" >demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
固定导航
<div id="demo1" style="" >demo1</div>
<div id="demo1" style="" >demo2</div>
<a style="display: block;position: fixed;bottom: 100px;border: 1px;solid
black;height: 50px;width: 100px;background-color: #fcc;" href="#demo1" >find demo1</a>
<a style="display: block;position: fixed;bottom: 100px;border: 1px;solid
black;height: 50px;width: 100px;background-color: #ffc;" href="#demo2" >find demo2</a><a href=""></a>
1.超链接
2.锚点
3.打电话(href="tel:138XXXXXXXX")、发邮件(href="mailto:邮箱地址")
4.协议限定符(<a href="javascript:while(1){alert('让你手欠')}">点我试试呀</a>)
<form>占html的重要性的50%</form>
表单自己能发送数据
<form method="get/post(发送数据的方式)" action="http://www...(发送地址)"></form>
<html>
<head>
<title>document</title>
<style type="text/css">
input{
border: 1px solid #999;
}
</style>
</head>
<body>
<form method="get" action="">
<p>username:<input type="text" name(数据名)="username" value="请输入用户名"></p>
<p>password:<input type="password" name="password" value="请输入密码"></p>
单选框：
以下哪个是你们所喜欢的男星
1.贝克汉姆<input type="radio" name="star" value(数据值)="xiaobei">
2.莱昂纳多<input type="radio" name="star" value="laiangnaduo">
3.彭于晏<input type="radio" name="star" value="pengyuyan">
提交按钮<input type="submit" value="显示内容">
</form>
</body>
</html>实现鼠标聚焦时搜索框内文字消失,鼠标移开文字出现；输入内容移开显示输入内容：
<html>
<head>
<title>document</title>
<style type="text/css">
input{
border: 1px solid #999;
}
</style>
</head>
<body>
<form method="get" action="">
<p>username:<input type="text" name(数据名)="username" style="color: '#999999' value="请输入用户名"
οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"
οnblur="if(this.value==''){this.value='请输入用户名';this.style="color: '#999999';"}"></p>
</form>
</body>
</html>