本土新冠疫情

ttps://i.snssdk.com/feoffline/amos_basic/html/main/index.html?amos_id=6987161637471911966&group_id=7036230004384058911&style_id=30014&is_full_screen=1&share_token=FE58CDFA-8A3A-423D-A99E-F5849E2D0AE0&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_ios&utm_campaign=client_share 关注本土新冠疫情 -

<html>
	<head> 
		标题 ---此处放置标题、导航、登录等内容
		<!此处放置标题、导航、登录等内容--->
	</head>
	<body> 
		<!此处放置页面主要内容--->
		<! ：空格
		<: 小于号
		>: 大于号
		": 引号--->
		<p>第一段 世界大势，合久必分，分久必合。</p>
		<hr/> <!表示单行横线显示--->
		<br/> <!表示换行--->
		<h1> hello world, html is easy</h1>
		<h2> hello world, html is easy</h2>
		<h3> hello world, html is easy</h3>
		<h4> hello world, html is easy</h4>
		<h5> hello world, html is easy</h5>
		<h6> hello world, html is easy</h6>
		<p>普通字体</p>
		<b>粗体</b> <i>斜体</i> <del>本文字已被删除，请忽略</del>
		
		<p> hello     world</p>  <!段落标记--->
		<a href="http://www.baidu.com" target="_self"> 点击进入百度</a>
		<br/>
		<img src="http://mysite.com/mypic.png" alt="网站作者照片">
		<h3> 普通无边框表格：</h3>
		<table>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>带表头，有边框，有跨列单元:</h3>
		<table border="1">
		<tr>
			<th>head1</th> <th>head2</th> <th>head3</th>
		</tr>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>三种列表的表达方式:</h3>
		<table cellpadding="2" cellspacing="2">
		<tr>
			<td>
				<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
			</td>
			<td>
				<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
			</td>
		</tr>
		</table>
		<dl>
			<dt>CPU</dt><dd>处理器</dd>
			<dt>MEM</dt><dd>内存</dd>
		</dl>
		
		<body bgcolor="#FF0000">
		<body bgcolor="RGB(255,0,0)">
		<body bgcolor="RED">
		
		<p>视频</p>
		<object
			classid="clsid:d27sfsfstqwetsasasdfsdfs"
			codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
			<embed src="flashfile.swf" width="300" height="200"></embed>
		</object>
		<br/>
		
		<p>音频</p>
		<audio controls="crontrols">
			<source src="sample_song.mp3" type="audio/mp3" />
		</audio>
		
		<br/>
		<p>视频</p>
		<video controls="controls"/>
			<source src="sample_video.mp4" type="video/mp4">
		</video>
		
	    <p>html表单---文本输入</p>
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="name"></td>
				<td>密码：</td>
				<td><input type="password" name="pass"></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
		<table>
			<tr>
				<td>性别：</td>
				<td>用户名：</td>
				<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
				<td>女性<input type="radio" checked='checked' value="female" /></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
	</body>

</html>

末有福利

前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：

背景知识

软件安装

文本编辑器

vscode(推荐使用，功能强大)
Sublime Text
NodePad++

浏览器

Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

构建工具

Webpack
Gulp

Web standards

Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。

当下使用的web技术

主流浏览器

Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

协议

协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常

http
https
socket

HTML, CSS, and JavaScript

开发工具

各浏览的DevTool,便于调试
Linters插件
Minify工具
CDN等
测试工具
js库和前端框架（站点构建的更快、更高效）

服务端语言

Python, NodeJS, Deno, Go, Rust

面临的挑战

浏览器兼容

Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在

响应式设计

厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容

性能

天下站点，只有快，才能留住用户

易用性

站点的访问人群不同，要具备普适性，都能轻松使用。

国际化

国际语言众多，需要尽可能的多支持

安全性

用户隐私数据保护

HTML

html基础概念

html元素

当然，也有例外，不是这种格式的

# Empty elements， or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
复制代码

html元素嵌套

<p>My cat is <strong>very</strong> grumpy.</p>
复制代码

块元素和行内元素

块元素，独占一行；行内元素，按先后顺序，排列这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含

元素属性

其中，也存在一种特殊的属性：Boolean attributes

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
复制代码

另外，也会存在一些特殊的写法。推荐都是key="value"形式

<a href=https://www.mozilla.org/>favorite website</a>
复制代码

html文档结构

不管多少连续的空白，浏览器都会解析会一个空格

<!DOCTYPE html> # 定义解析格式
<html> # 文档的root 
  <head> #定义源数据地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文档的可见内容部分
    <p>This is my page</p>
  </body>
</html>
复制代码

元数据等请移步参考

html特殊字符

<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义

html注释

<!-- 
 <p>I am!</p> 
-->
复制代码

html 多媒体

image

普通的图片

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">
复制代码

caption添加标题

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
复制代码

响应式图片

根据展示设备尺寸的不同，加载不同的图片

<img srcset="elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy">
复制代码

设备尺寸相同，但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">
复制代码

利用picture，不同设选择加载不同的图片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
复制代码

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
复制代码

audio

单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
复制代码

video

单一url 浏览器厂商，针对视频的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<video controls width="400" height="400"
       autoplay loop muted preload="auto" 
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
复制代码

svg

image引用svg

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />
复制代码

html引用svg

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>
复制代码

iframe等中引用svg

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
复制代码

canvas

canvas与svg不同，canvas基于像素,svg基于矢量图

#html
<canvas id="my-canvas" width="600" height="400"></canvas>
复制代码

嵌入元素

iframe, embed and object

iframe

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>
复制代码

html table

样式指定

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
复制代码

更好的样式指定

col 一次指定即可

<table>
  <colgroup>
    <col> # 定义在colgroup中，与th个数对应
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
复制代码

全部设置

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>
复制代码

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料大厂面试真题免费获取，希望能够对你们有所帮助。

在线咨询

上一篇：网页设计中常用的字体效果漂亮的蓝色数码发光字你必须
下一篇：实操干货：亚马逊产品上传错误代码介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商