html5+css3+JavaScript
结构+表现+行为(交互)
目录 CONTENTS
- 初识HTML
- 网页基本标签
- 图像,超链接,网页布局
- 列表,表格,媒体元素
- 表单及表单应用
- 表单初级验证
HTML01 :初识HTML
什么是HTML
HTML发展史
目前流行(2019.06.15):HTML5+CSS3
HTML的优势
W3C标准
org:开源
标准包括(面试提问)
DOM:文档
ECMAScript:JavaScript遵循的标准
常见IDE(工具及快捷键)
这里我们选择IDEA工具:
创建一个网页:
- new project–>java–>一直下一步
- 删掉src文件
- 新建一个html文件夹
- 新建我的第一个网页.html
如何修改浏览器
- File–>Settings–>Web Browsers
- 修改对应的浏览器路径
- 如C:\Program Files (x86)\Tencent\QQBrowser\QQBrowser.exe
- 点击Apply–>ok
常用快捷键
- 注释 ctrl+/
- 复制到下一行 ctrl+d
- 快速生成标签 xx+Tab
HTML02 :网页基本信息
HTML基本结构
网页基本信息
<html lang="en">
向搜索引擎表示该页面是[html语言](https://www.baidu.com/s?wd=html语言&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao),并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english
你的页面如果是中文页面,可将其改为
<html lang="zh">
zh即表示中文
<!-- DOCTYPE:告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页的头部 -->
<head>
<!--meta描述性标签,它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keyworlds" content="小锅学Java,西部开源">
<meta name="description" content="在梦想面前,一切都是借口">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页的主体 -->
<body>
<h3 style="color: #ff3c2b">骚年你渴望力量吗?</h3>
</body>
</html>
HTML03 : 网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>人生最美是黄昏,淡淡生活,慢慢变老。</p>
<p>放下一天的忙碌,忘记一生的疲惫,舍去尘世的烦恼。</p>
<p>爱恨随缘,心静如水,生死无畏,得失坦然。</p>
<p>不负光阴,不负爱情,不负心灵,不负今生。</p>
<!--换行标签-->
一抹夕阳,恰如人生五六十岁的样子,看惯了人生起起落落,知天命,但不颓废;没有波澜,但不懈怠生活;安安静静,但内心低吟浅唱。
</br>
被生活抹去了年少轻狂的棱角,凡事不做作,也不会委屈了自己,恰如渐行渐远的阳光。“走远”,是一种生命的厚度,如黄昏的云彩,叠加了阳光的“红”,才更加绚丽多姿,来去从容,悠悠而过,得失珍惜,失之坦然。
</br>
“任尔东南西北风,我自岿然不动”,几十年的路,不过须臾之间,看过的,听过的,想过的,做过的,都记得清清楚楚,但想起来的时候,都是天边的一抹夕阳,有阳光的金色之美,但没有了烈日炎炎的焦躁不安。
</br>
<!--水平线标签-->
<hr>
<!--字体样式标签-->
粗体: <strong>I Love You</strong>
</br>
斜体: <em>I Love You</em>
</br>
<!--特殊符号-->
空格1:唐 李白
</br>
空格2:唐 李白(相当于4个nbsp)
</br>
大于:>
</br>
小于:<
</br>
©版权所有林小锅
</body>
</html>
HTML04 : 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址(必填)
相对地址(推荐使用),绝对路径
../ --上一级目录
alt:图片文字(必填
-->
<img src="../resources/image/linxiaoguo.jpg" alt="路飞" title="悬停文字" height="643" width="960">
</body>
</html>
HTML05 : 超链接标签及应用
使用QQ推广工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习