HTML

============================    Http协议        ==========================
例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：
1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
5、释放 TCP连接;
6、浏览器将该 html 文本并显示内容;
 
详见：
 
============================    HTML常用标签    ==========================
<script></script>：包含JavaScript代码.
<br>：换行.
<span></span>：用来组合多个行内标签元素。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<div></div>：内容容器. HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<div> 元素的另一个常见的用途是文档布局。
<ul></ul>：多列表
<li></li>：列表项
<input type="checkbox" ng-model="">：复选框
<strong></strong>：加粗字体
<font size=6>这是6号字体文本</font>
<hr> 标签在 HTML 页面中创建水平线。用于分隔内容.
<p></p>：段落标签。浏览器会自动地在段落的前后添加空行。
<select></select>与<option></option>相结合构成下拉列表. selected指定预选的option
<textarea></textarea>：文本域
<noscript></noscript>： 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<a></a>：链接标签。eg：
 <a href="http://www.baidu.com"><img src="Chrysanthemum2.jpg" width="100" height="60"></a>
 <a href="//www.baidu.com"><p>百度一下</p></a>
 <p><a href="//www.baidu.com">百度一下</a> 你好啊</p>
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>        //_blank表示链接页面在新页面打开，默认在当前页面打开。rel="noopener noreferrer"表示不会打开其他网站
  在HTML文档中插入ID:<a id="tips">有用的提示部分</a>       //链接到页面指定的位置
            在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：<a href="#tips">访问有用的提示部分</a>
注：
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。
            所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
<img>：空标签。显示图片。图片加载耗时，慎用。
显示文件夹中的图片
            <img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
显示网络中的图片
            <img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
位于<head>头标签中的子标签：
<link rel="stylesheet" type="text/css" href="styles.css">： <link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表
 
<base> - 定义了所有链接的URL，使用 <base> 定义页面中所有链接默认的链接目标地址。
<style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<title></title>：HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。显示时，要将<link>标签放入<head>里。eg：
            <link rel="shortcut icon" href="图片url">
            <title>这是一个带图片的标签</title>
 
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>，<div>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>, <span>
 
<form></form>：表单
=================    实例1：在数据周围绘制一个带标题的框
<form action="">    //action一般为接收数据并进行处理的脚本. method属性一般为“get”
<fieldset>                    //定义了一组相关的表单元素，并使用外框包含起来
<legend>Personal information:</legend>    //<legend>定义了 <fieldset> 元素的标题
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
 
<iframe></iframe>：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面
                    eg：<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
                    eg：使用iframe显示连接页面
                            <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
                            <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
 
颜色：#FF0000 对应rgb的值，每两位16进制的值对应一个通道。三种方式：
            <p style="黄色</p>
            <p style="黄色</p>
            <p style="黄色</p>        //颜色名
 
 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如: <script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
 
document.getElementById("demo").style.color="#ff0000";    //JavaScript处理 HTML 样式
 
HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符
 
HTML中不支持空格、>等特殊字符，但可以用实体编号或实体名称来替换：https://www.runoob.com/html/html-entities.html
 
html通过<img>标签加载图片报错“Not allowed to load local resource: file://XXXX”
加载本地图片 <img src="file:///C:/Users/Public/Pictures/Sample Pictures/Chrysanthemum2.jpg">时报错。
原因：浏览器为了安全考虑就是不允许直接访问
解决办法：
方法1：直接双击xxx.html
方法2：直接在Chrome浏览器中输入 file://XXXX 是可以访问本地图片或远端图片
方法3：把本地图片放到和html同目录下，使用相对路径
方法4：创建虚拟路径，详见：https://www.cnblogs.com/eoooxy/p/6085255.html
 
搭建网站在挑选ISP（使用因特网服务提供商）时需要注意的地方：https://www.runoob.com/hosting/hosting-tutorial.html 
 
 
HTML编写规范：
属性值必须有引号：<img width="100">
空元素必须包含关闭标签：<img  src=""  />        <br />        <hr  />
元素必须有关闭标签
 
JQuery基础知识：
1、jQuery 中 var $this = $(this) 的作用
在很多地方，我们都会看到 var $this = $(this)的代码，那它到底是什么意思，有什么用呢？
this其实是一个html 元素。 
$this 只是个变量名，加$是为说明其是个jquery对象。 
而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。
作用：把当前对象保存起来，便于后边的使用。
 
2、JQuery的函数“$(function() {})”的含义及与“$(document).ready(function(){})”的区别
 
3、JQuery数组遍历 - $.each()，$().each()和forEach()
 
4、$("")将DOM元素转成jQuery对象
//$(".menu-message-dropdown, .message-menu-dropdown")jQuery括号中.的语法等同于css中选择器的语法
$(".menu-message-dropdown, .message-menu-dropdown").on("click", ".dropdown-menu", function(e) {
      e.stopPropagation()
 }),
https://blog.yayuanzi.com/261.html（选择器中的逗号）
 
 
 
浏览器不支持读写本地文件,只有服务器支持.  
posted @ 2020-03-04 10:39  Coding练习生  阅读(233)  评论(0)  编辑  收藏  举报