入门(一)"/>
Web 前端入门(一)
Web 前端入门
1.前端技术栈
- Html 内容
- CSS 样式
- Javascript 行为
- HTTP协议
要注意不同浏览器的区别
2.Html基础
1. !DOCTYPE标签
告诉浏览器使用的规范 一般为 html
2. html 标签
lang=“en”
表示使用语言为英文 如果用中文则为zh
3.meta 标签
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
如：
<meta name="keywords" content="young">
<meta name="description" content="study" >
keywords代表关键字 description代表描述
必须要有content
4.常用段落标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4><!--段落标签--><p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p><!--换行标签-->
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/><!--水平线标签--><hr/><!--粗体，斜体标签-->
<h1></h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you </em>5.图像标签
<!--图像标签-->
<!--src:图像地址，最好用相对地址-->
<!--title:悬停文字-->
<img src="../resource/image/1.jpg" alt="jpg resource not find" title="I am so cute" >
6.链接标签
<!--链接标签-->
<!-- a+tab-->
<a href="">click me to baidu</a>
<br>
<a href=""><img src="../resource/image/1.jpg" alt="jpg resource not find" title="I am so cute" ></a>
<br><a href="" target="_blank">click</a>
7.锚标签
<!--锚标签
1.需要一个锚标记
可以跳到任意页面得任意位置-->
<a name="top">顶部</a><a href="#top">回到顶部</a>
8.功能性标签
<!--功能性链接
邮件链接 mailto
qq链接
-->
<a href="mailto:1752935@tongji.edu.cn">联系我</a>
<a target="_blank" href="=3&uin=&site=qq&menu=yes"><img border="0" src="=2::53" alt="联系我" title="联系我"/></a>
9.列表标签
<!--列表
有序列表
无序列表
自定义列表-->
<ol><li>java</li><li>python</li><li>css</li><li>html</li><li>javascript</li></ol><br><ur><li>java</li><li>python</li><li>css</li><li>html</li><li>javascript</li>
</ur><!--自定义列表-->
<dl><dt>programing language</dt><dd>java</dd><dd>python</dd><dd>css</dd><dd>html</dd><dd>vue</dd>
</dl>
10.表格标签
<!--表格标签-->
<!--tr 列
td 行--><table border="1px"><tr><td colspan="4">1-1</td></tr>
<!--colspan 跨列--><tr><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<!--rowspan 跨行--><tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr></table>
11.音视频标签
<!--
视频元素 video
音频元素 audio
src 资源路径
controls:控制条
autoplay 自动播放
音频自动播放问题未得到实现，存在bug
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/1.mp3" control autoplay></audio>
12.网页嵌套
<!--iframe 内联框架
src:地址
w-h:宽度高度
此处target和name一致代表在内联中进行跳转
-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="" name="young" frameborder="0" width="1500px" height="1000px"></iframe>
<a href="Hello%20world.html" target="young">点击跳转</a>
13.表单语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body>
<!--form
method="post" "get"
action="result.html" 提交的位置，可以是网站，也可以是一个请求处理地址
-->
<!--
get方式提交可以看到信息 不安全但是高效
post 比较安全 可以传输大文件
--><!--input
文本框
password可以是隐藏的
name 指表单元素的名称
value 元素的初始值
size 表单元素的初始宽度
maxlength 最长能写多少字符-->
<h1>注册账号</h1>
<form action="页面结构.html" method="get">
<!--文本输入框-->
<!--
readonly 只读标签
disable 禁用
hidden 隐藏
placeholder 提示信息
required 不能为空
pattern 正则表达式 搜索已有表达式
--><p>名字: <input type="text" name="username" placeholder="输入姓名" required pattern="杨*"></p><p>密码: <input type="password" name="password" value="123"></p><p>
<!--radio 单选
name决定分组 来决定是否可以都选
--><input type="radio" value="boy" name="sex" checked>男<input type="radio" value="girl" name="sex" disabled>女</p>
<!--checkbox 多选
一般多选框name写成一样
--><p><label for="lab">你点我试试</label><input type="checkbox" value="sleep" name="hobby" id="lab">睡觉<input type="checkbox" value="coding" checked name="hobby">写代码<input type="checkbox" value="play_games" name="hobby">玩游戏</p><p>
<!--
image图片按钮 会跳转
-->按钮：<input type="button" name="but1" value="点击边长">图片按钮：<input type="image" name="but2" src="../resource/image/1.jpg"></p>
<!-- 下拉框，列表框--><p>国家： <select name="列表名称" id=""><option value="选项的值">中国</option><option value="选项的值">美国</option><option value="选项的值" selected>瑞士</option><option value="选项的值">印度</option></select></p>
<!--文本域--><p>意见和建议：<br><textarea name="textarea" cols="50" rows="10"></textarea></p><!--文件域--><p><input type="file" name="files"><input type="button" value="上传" name="submit"></p><!--邮件验证-->
<!--邮箱会自己验证--><p>邮箱:<input type="email" name="emails"></p><p>网址：<input type="url" name="urls"></p><p>数字: <input type="number" max="1000" min="50" step="20"></p><p>
<!-- 滑块-->音量:<input type="range" min="0" max="100" step="20"></p><!--搜索框--><p>搜索:<input type="search" name="search"></p>
<!--增强鼠标可用性 使鼠标好使--><label for="mark">你点我试试</label><input type="text" id="mark"><p><input type="submit" ><input type="reset" ></p><!--表单初级验证--></form></body>
</html>
3.html 可扩展性
1.自定义属性
data-xxx
2.meta标签
<!-- 移动设备Viewport--><meta name="viewport" content="initial-scale=1"><!--关闭ios电话号码自动识别--><meta name="format-detection" content="telephone=no">
3.link标签
可以引入CSS样式 提供RSS等等
4.microdata
帮助浏览器来识别类型
<div itemscope itemtype="http: //schema.org/Book"><h1 itemprop="name">梦的化石</h1><img src="/resource" alt=""><dl><dt>作者:</dt><dd itemprop="author" itemscope itemtype="http: //schema.org/Person"><span itemprop="nationality">[日]</span><span itemprop="name">今敏</span></dd><dt>ISBN:</dt>
<dd itemprop="isbn">9898988</dd></dl>
</div>4.深入学习html
通过查略文档和教程，持续学习！
更多推荐
Web 前端入门(一)
发布评论