admin 管理员组

文章数量: 887007

前端入门01

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

常用快捷键
  1. 注释 ctrl+/
  2. 复制到下一行 ctrl+d
  3. 快速生成标签 xx+Tab

HTML02 ：网页基本信息

HTML基本结构

网页基本信息

<html lang="en">
向搜索引擎表示该页面是[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：唐&nbsp;&nbsp;&nbsp;&nbsp;李白
</br>
空格2：唐&emsp;李白(相当于4个nbsp)
</br>
大于：">&gt;
</br>
小于：&lt;
</br>
&copy;版权所有林小锅</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=

本文标签： 前端入门01

版权声明：本文标题：前端入门01 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732353371h1533733.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。