web学习---HTML学习---笔记
前言
公司想让用uni-app做混合开发
然后，uni-app需要VUE
VUE需要先学习HTML、CSS、JavaScript
趁此机会，学习下前端知识，扩展下知识面
一个完整的网页一般由3部分组成：
- HTML：网页的内容结构
- CSS：网页的视觉体验
- JavaScript：网页的交互处理
HTML文件
HTML文件的扩展名是.htm或.html
HTML被称为：超文本标记语言
HTML是由标记(标签、tag)组成
标记里面的东西称为内容
标记+内容被称为元素
元素的书写格式：
标签对：
<元素名>具体内容</元素名>单标签：
meta、img、br、input没有包含具体内容，书写格式是单标签
<元素名>标签名不区分大小写，例如：
<div><Div><DIv><DIV>都是一样的
建议：全小写元素可以嵌套元素
HTML提供了大量元素，每一个元素都有特定的用途
元素的属性
每一个元素都可以拥有自己的属性，属性可以增强元素的功能
书写形式：<起始标签 属性名="属性值">
多个属性之间，属性顺序没要求
属性值可以使用双引号、单引号，也可以省略引号。建议使用双引号
属性与属性之间，至少有一个空格
常用标签
< !DOCTYPE html>、 < html>、< head>、 < body>
< !DOCTYPE html>：文档声明，告诉浏览器，这是一个HTML，浏览器就用HTML标准去解析识别HTML文档
html元素是HTML文档的根元素，一个文档中只能有一个，其他元素都是它的后代元素
head元素
head元素里面的内容是一些”元数据“（元数据：描述数据的数据）
一般用于描述网页的各种信息，比如：字符编码、网页标题、网页图标等
head的子元素可以有：
title元素：网页的标题
meta元素：用于设置网页的字符编码，一般使用UTF-8body元素
body元素里面的内容是：网页的具体内容和结构
h、p、strong元素
- h(head)：表示网页的标题，h1~h6一共6个等级
h元素有助于网址排名 - p元素(paragraph)：表示文章中的一个段落
文字操作
strong：强调、加黑
em：斜线
del：删除
ins：下划线
div和span：两者都没有语义，它们就是一个盒子，用来装内容的
div：独占一整行，在其后面写的，也要换行到下一行（大盒子）
span：可以一行放多个span（小盒子）pre：如果想完全保留HTML代码中的空格、换行，可以使用pre元素
字符实体：有些字符是特定的，不能显示出来，比如< div>，可以使用字符实体转化下，从而让其显示< ;div> ;(<div>)
code：用于表示代码
br：单标签，表示强制换行
<br/>img：图片标签
<img src="url"/>
src是source的缩写
<img src="3.1@2x.png" alt="图片不显示的时候才显示" title="鼠标放在图片上显示" width="100" height="100" border="设置边框的宽度"/>
- ./代表当前文件夹，如果啥都不写，默认就是./
- …/代表上一级文件夹
超链接标签
- a元素：定义超链接，用于打开新的URL
<a href="https://www.baidu.com">百度</a>
href:hypertext reference(超文本 引用)
target：觉得新链接在当前界面(_self)打开，还是新的界面(_blank)打开
a标签除了跳转到外部练级、内部链接、下载等外，还可以做为锚点链接：
- 锚点链接：跳转到网页的具体位置
<a href="#first" target="_self">第一章</a>
<h2 id="first">第一章</h2>
#后面不写东西，代表跳转到顶部
也可以跨网页跳转到页面的对应锚点，只需要在url后面拼接上锚点即可：xxx#first
- 图片链接：使用a标签包含Img标签即可
<a href="https://www.baidu.com"><img src="3.1@2x.png" />
</a>
iframe元素：在一个HTML文档中嵌入其他HTML文档
可以给iframe起个name，然后打开对应的url（taget=name）base元素：可以在base里面写一些基础功能
<base target="_blank" />
特殊字符
空格：
小于号<：<（less than）
大于号>：>（greater than）
表格标签
- table是表格，有属性：border、位置(left、right、center)、cellpadding字体与边框的左间距、cellspacing单元格之间的间距
- tr是行
- td是单元格
- th是头，一般用在表头，与td不一样的地方是，th会加粗并居中
- 也可以在table里面，加上
<thead>(表示头)和<tbody>(表示内容)
<table align="center" border="1" cellpadding="20" cellspacing="0"><tr> <th>姓名</th> <th>性别</th> <th>手机号</th></tr><tr> <td>3</td> <td>4</td> <td>13001280000</td></tr><tr> <td>5</td> <td>6</td> <td>4</td></tr>
</table>
效果：
合并单元格
- rowspan=“合并单元格的个数”：跨行合并
- colspan=“合并单元格的个数”：跨列合并
列表标签
无序列表、有序列表、自定义列表
无序列表：
<ul><!-- unorder list--><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>
有序列表：<ol>order list
自定义列表：
<dl><!--definition lists--><dt>关注我们</dt><!--definition term--><dd>新浪微博</dd><!--definition description--><dd>官方微信</dd><dd>联系我们</dd></dl>
表单标签
一个完整的表单一般包括：表单域、表单控件（表单元素） 和 提示信息
表单域<from>：
包含表单元素的区域，<from>会把它范围内的表单元信息提交给服务器
表单控件（元素）
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
- input，里面可以有属性type，不同的type对应不同的输入类型
练习
<form action="url地址" method="get" name="表单名字"><p>各种表单元素控件</p><!-- name value一般是给后台用 maxlength可以限制字数 -->用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/> <br/>密码：<input type="password" name="pwd" value="请输入密码"/> <br/>手机号：<input type="tel" name="tel" value="请输入手机号"/> <br/><!-- cheked 可以默认选中 radio是单选，单选类型需要name一样--><!-- label标签，可以点击文案的是，就选中按钮。需要将label的for和input的id关联起来即可 -->性别：<label for="nan">男</label><input type="radio" name="sex" checked="checked" value="nan"/> <label for="nv">女</label><input type="radio" name="sex" value="nv"/> <br/>爱好：吃饭<input type="checkbox" name="hobby" checked="checked"/> 睡觉<input type="checkbox" name="hobby"/> 打豆豆<input type="checkbox" name="hobby" /> <br />上传头像：<input type="file" /> <br /><input type="button" value="获取验证码"/> <br />提交：<input type="submit" value="注册"/> <br /><br /><br /><input type="reset" value="重新设置"/>
</form>
<label>标签是标注标签，用于绑定一个表单元素，当点击<label>标签内部的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，用来增加用户体验
- select下拉选择标签
<select><!-- selected默认选中 --><option selected="selected">选项1</option><option>选项2</option><option>选项3</option><option>选项4</option>
</select>
- textarea文本域标签
<textarea cols="50" rows="5">
请输入您的宝贵建议
</textarea>
小练习：
<h4>青春不常在，抓紧谈恋爱</h4><br/>
<table width="500"><tr> <td>性别</td> <td> <input type="radio" checked="checked" name="sex" value="nan"/><label for="nan"><img src="3.1@2x.png" width="20"> 男 </label> <input type="radio" name="sex" value="nv"/><label for="nv"><img src="3.1@2x.png" width="20"> 女 </label></td> </tr><tr><td>生日</td> <td> <select><option >--请选择年--</option><option value ="1990">1990</option><option value ="1991">1991</option><option value ="1992">1992</option></select><select><option>--请选择月--</option><option value="1月">1月</option><option value="2月">2月</option><option value="3月">3月</option></select><select><option>--请选择日--</option><option value ="1">1</option><option value ="2">2</option><option value ="3">3</option></select></td> </tr><tr><td>所在地区</td> <td> <input type="text" value="北京思密达" /></td> </tr><tr><td>婚姻状况</td> <td> <input type="radio" checked="checked" name="marray" value="weihun"/><label for="weihun">未婚 </label> <input type="radio" name="marray" value="yihun"/><label for="yihun">已婚 </label> <input type="radio" name="marray" value="lihun"/><label for="lihun">离婚 </label> </td> </tr><tr><td>学历</td> <td> <input type="text" value="幼儿园" /></td> </tr><tr><td>喜欢的类型</td> <td> <input type="checkbox" name="hobby" />妩媚的<input type="checkbox" name="hobby" />可爱的<input type="checkbox" name="hobby" />小鲜肉<input type="checkbox" name="hobby" />老腊肉<input type="checkbox" name="hobby" />都喜欢</td> </tr><tr><td>自我介绍</td> <td> <textarea>自我介绍</textarea></td> </tr><tr><td></td> <td> <input type="submit" value="免费注册" /><br/><input type="checkbox" name="agree" checked="checked"/>我同意注册条款和会员加入标准 <br/><a href="新闻.html" target="_blank">我是会员，立即登录</a><h2>我承诺</h2><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td> </tr>
</table>
web学习---HTML学习---笔记相关推荐
- Web前端系统学习——课程笔记（章节8-9）
Web前端系统学习--课程笔记 课程链接:WEB前端系统学习 - 网易云课堂 参考教程:菜鸟教程 笔记链接:Web-Learn-Note 章节8 表格与表单 课时30 表格嵌套规则 样式初始化 14: ...
- Deep Learning（深度学习）学习笔记整理系列之（八）
Deep Learning(深度学习)学习笔记整理系列之(八) 分类: Deep Learning 机器学习 Linux驱动2013-04-10 11:4257652人阅读评论(25)收藏举报 ...
- vs2010 学习Silverlight学习笔记(11)：数据与通信之WebClient
概要: 基础知识终于学完了,我今天又从第一篇看到第十篇,发现明白了一些东西,还有忘记了部分东西.呵呵,咱不能猴子掰玉米,学了新的忘记旧的.要经常去复习,去用.这一篇是数据通信部分的第一篇,有些东西没接 ...
- web前端从学习到学废
web前端从学习到学废 了解web前端 1.HTML.CSS系列之导学 2.什么是HTML.CSS? 3.宇宙第一编辑器VSCode 4.chrome浏览器 5.深入了解网站开发 6.web三大核心技 ...
- 阿里云天池大赛赛题解析(深度学习篇)--阅读笔记1--赛题一
阿里云天池大赛赛题解析(深度学习篇)–阅读笔记1 [x]表示遇到不懂的知识,将在[知识补充]给出具体讲解. 文章目录 阿里云天池大赛赛题解析(深度学习篇)--阅读笔记1 前言 赛题一 瑞金医院MMC人 ...
- 【转载】Deep Learning（深度学习）学习笔记整理系列
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
- 3台云腾讯云开始hadoop学习之路笔记二
3台云腾讯云开始hadoop学习之路笔记二(接上) 大三党开始学习hadoop之路了,菜鸟学习hadoop,有啥错误请大佬指教.由于自己电脑配置不够,只能买3台腾讯云服务器来学习了.以下笔记都是记录我 ...
- Web安全渗透学习-环境搭建
Web安全渗透-学习笔记-第一阶段 环境准备 OWASP靶机下载 OWASP下载教程 Kali虚拟机安装 虚拟机网络环境设置 虚拟机无法上网的情况 小得 环境准备 首先我只是一名纯小白,特别纯那种,目 ...
- 技术胖前端学习路线学习笔记【更新中】
文章目录 技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...
- 【0基础到精通】Web渗透测试学习路线
Web安全相关概念 熟悉基本概念(SQL注入.上传.XSS.CSRF.一句话木马等). 1.通过关键字(SQL注入.上传.XSS.CSRF.一句话木马等)进行Google/SecWiki: 2.阅读& ...
最新文章
- Vulkan Tutorial 12 Fixed functions
- 高斯-赛德尔迭代法简介
- 的boc调制matlab程序_Matlab仿真基础数字全息
- 使用PHP CURL的POST数据
- Nginx下安装配置PageSpeed模块，轻松完成网站提速
- 高并发MPP查询引擎Impala初识
- 做产品必须知道的：从产品助理到产品总监的职业进阶
- 虚拟机下CentOS7开启SSH连接
- 计算机基础判断试题及答案,计算机基础知识试题及答案判断题
- Testbed单元测试
- stm32用杜邦线与中断模拟led灯开关
- ITIL事件管理流程关键知识
- C语言 | 数组升序排列（冒泡排序法）
- html5 复制到剪贴板 兼容,JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
- 应广单片机程序模块化的工程建立
- 使用unity制作简单的VR时打包APK出现的几个问题
- 一文读懂视频编解码原理
- 2021科大讯飞_环境空气质量评价挑战赛_LineRegression_baseline0.04385
- fan-out的定义
- 函数极限存在准则：夹逼准则