Web 前端入门(一)
2024-05-27 20:26:26
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="http://www.baidu.com">click me to baidu</a>
<br>
<a href="http://www.baidu.com"><img src="../resource/image/1.jpg" alt="jpg resource not find" title="I am so cute" ></a>
<br><a href="http://www.baidu.com" 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="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=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 前端入门(一)相关推荐
- web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
- web前端入门学习 html5（1）
web前端入门基础教程,最适合零基础前端小白的视频教程html5+css3 文章目录 html 浏览器内核 web标注 语法规范 html基本结构标签 web常用开发工具 vscode基本使用 文档类 ...
- web前端入门必知的10个技术
随着HTML5的发展和普及,了解HTML5将成为Web开发人员的必修课.如何把网页做得更美观,对用户更有吸引力,不仅是企业对前端开发人员要求,更是一个合格的web前端工程师的自我修行.今天小编就跟大家 ...
- Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
- 前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
- html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演 第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
- 经验分享：Web前端入门要怎么开始学？
现在,几乎整个互联网行业都缺前端工程师,不仅是刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在. 据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开 ...
- 转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- 黑马pink老师Web前端入门笔记（二）
Web前端入门 二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
最新文章
- JS计算起点坐标到终点坐标的驾车距离和驾车时间
- C# 委托（Delegate）
- 【NLP】中文情感分类单标签
- jedis使用pipline的方法
- 102 二叉树层序遍历Binary Tree Level Order Traversal @ Python
- sqlmap入门使用教程
- 【U8】出纳管理制单锁定
- ccfb类会议有哪些_CCF推荐国际学术会议
- thon中的全局变量
- Apache 支持ipv6 安装及常见问题
- 格美家具网站项目总结
- Server ran out of threads to serve requests. Consider raising the ThreadsPerChild setting
- pycharm 配置 interpreter
- 手游开发商Plarium游戏玩家超3.8亿！揭秘新作《突袭: 暗影传说》制作流程
- 模运算性质-mod (ACM学习笔记)
- 11项关键先进制造技术解读！
- 58同城笔试（2021/10/23）
- 学生用ChatGPT拿下全班最高分！教授惊呆！全美高校打响AI反击战...
- String和StringBuffer的转换
- 异常积累(SQLException)