devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web前端学习笔记html+css+js(一)_测绘与js

作者：凡人多烦事01 | 2024-02-22 06:33:36

赞

踩

测绘与js

前言

        web前端技术是指html、 css、javascript 以及衍生出的众多框架、技术等，用来实现与用户与互联网的界面交互。

第一部分  web基础篇

web前端，大前端技术

应用：pc页面，移动端页面，移动端app，微信公众号，小程序，游戏

web运行原理

浏览器：①功能：发送请求，把响应数据解析成图形化页面展示

②产品：chrome，safari，edge（-webkit-），firefox（-moz-），opera（-o-），IE（-ms-）

③技术：HTML (网页内容的载体)、 CSS（网页内容的装饰）、  javascript（特效实现）

一、HTML基础

1.简介

HTML（Hyper Text Markup Language）是指超文本标记语言，html使用标记标签来对网页进行描述。

2.特点

①以.html或者.htm为后缀

②由浏览器解析执行(默认①①情况代码从上往下，同一行从左往右按顺序执行)

③<关键字>  标签

④页面中可以嵌套js脚本

3.语法基础

标签，标记，元素，节点，对象

①双标记，封闭类型标记

<关键字>内容区域</关键字>  <b></b>

②单标记，非封闭类型标记，空标记

<关键字> 或者 <关键字/>   <br>  或者   <br/>

4.嵌套

在双标记的内容区域处，编写其它标记

①形成多个元素的功能叠加

②做页面布局：嵌套的要求（语义，语法；嵌套必须有缩进；嵌套不能写在一行；嵌套顺序要正确

5.属性和值

html定义很多属性和值，用来修改元素的样式和状态。属性和值必须出现在开始标记中，多个属性之间使用空格分开，值推荐放入双引号中。

html属性的分类

①通用属性

  id=""  页面中元素的唯一标识符，同一页面不能重复

  title="" 鼠标悬停在页面上显示的文本

  style="" css中，定义内联样式

  class=""  css中，引用类选择器

②专有属性

6.注释

不被浏览器解析运行的文本

<!-- 这里是注释 -->

*注释的注意事项 ：注释不能嵌套注释，在<>内部不能有注释

7.html文档结构

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>web前端开发</title>
  6. 	</head>
  7. 	<body>
  8. 	Hello World！
  9. 	</body>
  10. </html>

1.<!DOCTYPE HTML>

doctype：html  下面的代码是以h5的语法编写的

写在html文件第一行

告诉浏览器，当前html使用h5的语法编写，请用h5的规范解析

2.<html></html>

代表网页的开始和结束，一个页面中，有且只有一对<html>标签

<html>

       <head></head> 网页头部，定义了当前页面的全局信息

       <body></body> 网页的主体，展示的内容

</html>

3.<head></head>

<title>网页标题</title>

<script></script> 定义js代码块

<script src=""></script> 引入.js文件

<link rel="stylesheet" href=""> 引入.css文件

<meta> 单标签，元数据

<meta charset="utf-8">

<meta name="description" content="网页描述">

<meta name="Keywords" content="关键字">

4.<body></body>

浏览器的可视区域

属性  text=""   文本颜色

         bgcolor=""   背景颜色

8.文本标签

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		这是一段普通文本，大小默认16px
  9. 		<h1>标题标签</h1>
  10. 		<h2>标题标签</h2>
  11. 		<h3>标题标签</h3>
  12. 		<h4>标题标签</h4>
  13. 		<h5>标题标签</h5>
  14. 		<h6>标题标签</h6>
  15. <!-- 功能：单独成行，字号大小变化（h1最大 h6最小）.字体加粗，上下有垂直距离
  16.      属性：align： left/center/right  设置文本的水平对齐方式-->		
  17. 		<p align="left">段落标签</p>
  18. 		<p align="center">段落标签</p>
  19. 		<p align="right">段落标签</p>
  20.  
  21. 		<!-- 水平分割线 -->
  22. 		<hr color="red"size="3"/>
  23.         <!-- 属性:align="left"   设置水平对齐方式
  24.                   color="yellowgreen"  分割线的颜色
  25.                   size="50px"    分割线的粗细
  26.                   width="100px"  分割线的宽度-->
  27.         <!-- 换行 -->
  28.         <br />
  29. 		<b>粗体文本</b>
  30. 		<strong>粗体文本</strong>
  31. 		<i>斜体文字</i>
  32. 		<em>斜体文字</em>
  33. 		<s>删除线</s>
  34. 		<del>删除线</del>
  35. 		<u>下划线</u>
  36. 		<sub>下标字</sub>
  37. 		<sup>上标字</sup>
  38. 		<pre>
  39. 			预格式文本
  40. 			pre
  41. 		</pre><br />
  42. 		<!-- span和div都没有特定含义，一般用于页面布局 -->
  43. 		<span style="background-color: #1ABC9C;">行内元素 span一般用于文本的容器</span>
  44. 		<div align="left"style="background-color: #EC7063;">块内元素 div一般用于页面布局                
  45.         </div>
  46. 		<!-- 图片标签 -->
  47. 		<!-- 相对路径：./表示从当前目录查找 ../表示从上一级目录查找 -->
  48. 		<!-- 绝对路径：电脑磁盘真实路径 -->
  49. 		<img src="img/3.webp.jpg"alt="图片无法加载"width="200px"/>
  50. 		<img src="img/4.jpg"alt="图片无法加载"width="200px"/>
  51. 		<img src="img/2.jpg"alt="图片无法加载"width="200px"/>
  52. 		<br /><br /><br />
  53.         <!-- 超链接 -->    
  54. 		<a href="#"target="_blank">首页</a>
  55. 		<a href="https://www.baidu.com/"target="_blank">百度一下</a>
  56. 		<a href="#"><img src="img/5.webp"width="50px"height="50px"></a>
  57. 		<!-- 无序列表 -->
  58. 		<ul>
  59. 			<li>Apple</li>
  60. 			<li>Banana</li>
  61. 			<li>Orange</li>
  62. 		</ul>
  63. 		<!-- 有序列表 -->
  64. 		<ol type="i"start="20">
  65. 			<li>Apple</li>
  66. 			<li>Banana</li>
  67. 			<li>Orange</li>
  68. 		</ol>
  69. 		<!-- 自定义列表 -->
  70. 		<dl>
  71. 			<dt>一级</dt>
  72. 			  <dd>二级</dd>
  73. 			  <dd>二级</dd>
  74. 			<dt>一级</dt>
  75. 			  <dd>二级</dd>
  76. 			  <dd>二级</dd>
  77. 		</dl>
  78. 	</body>
  79. </html>

9.URL

Uniform Resource Locator

统一资源定位符----------俗称路径

①绝对路径

是一个完整的路径，使用网络资源的时候，用绝对路径。本地资源不能用绝对路径

http://cdn.tmooc.cn/bsfile/9b.jpg

使用网络资源优点，节省本服务器的本地存储空间； 缺点：资源不稳定

②相对路径----参照物就是当前的html

兄弟资源，直接写兄弟资源的名称  src="15.png"

资源是兄弟的儿子，先找兄弟，使用/找儿子   src="img/12.png"

资源是兄弟的儿子的儿子   src="img/image/12.png"

资源是父亲的兄弟,使用../找到父亲，直接写父亲的兄弟名称  src="../10.png"

10.超链接

<a href=""></a>

href="要跳转的页面路径"

target=" "  _self 默认值，在本页面打开新链接

           _blank  在新的选项卡页面中打开链接

--超链接的其它表现形式--

<a href="1.zip">下载</a>

<a href="mailto:liangliang@163.com">发送邮件</a>

通过a标签，调用js

<a href="javascript:js脚本">调用js 方法</a>

<a href="#">返回页面顶部</a>

除了作为返回页面顶部意外

在写项目的时候，如果不知道href跳转到哪里，用#占位

--锚点--

在页面上定义一个位置。叫做锚点

使用a标签，跳转到锚点，页面直接在这个位置显示

①定义锚点，有两种方式

  1.H4定义锚点，a标签的name属性定义锚点 <a name="锚点名称"></a>

  2.H5定义锚点，使用元素的id名称直接当做锚点名称

②跳转锚点

  <a href="#锚点名称"></a>

③跳转到其它页面的某一个锚点位置

在2.html中设置锚点，在3.html中跳转

<a href="./2.html#md5">找到2.html中的锚点</a>

11.表格

表格结构

<table>

  <tr>                --------table row

      <td></td>      --------table data

      <td></td>

      <td></td>

  </tr>

  <tr>

      <td></td>

      <td></td>

      <td></td>

  </tr>

  .........

</table>

属性

①table

border="1"  设置边框的

bordercolor="purple"  边框颜色

bgcolor="pink"  背景颜色

width="200"  设置宽

height="200" 设置高

align="center" 设置表格本身的水平对齐方式

cellpadding="1" 边框到内容之间的距离

cellspacing="0" 边框到边框之间的距离

②tr

bgcolor=" "

align="center"   设置内容的水平对齐方式

valign="bottom" 设置内容的垂直对齐方式 top/middle/bottom

③td/th

width="100"

height="100"

bgcolor="blanchedalmond"

align="right"

valign="top"

rowspan="" 跨行合并

colspan=""  跨列合并

12.语义标签

H5新出了，带结构语义的标签，来取代div

让代码的可读性增加吗，带语义的标签，可以让网络爬虫更快的找到

<headr></hader> 定义网页的头部。或者某个区域的顶部

<footer></footer>定义网页的底部，或者某个区域的底部

<nav></nav>定义网页的导航链接

<section></section>定义网页的主体

<aside></aside>网页的侧边框

<article></article> 定义与文字相关的内容，比如论坛，回帖

......未完待续

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/128912?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号