zoukankan      html  css  js  c++  java
  • 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(选择器中的逗号)
     
     
     
    浏览器不支持读写本地文件,只有服务器支持.  
  • 相关阅读:
    vue实现 toggle显示隐藏效果
    html+css奇淫技巧 3 教你如何伪类控制字体间距左右排版
    js 数组,字符串,json互相转换
    forEach 与for in
    js/jq 选项卡开发js代码
    html奇淫技巧 2 教你如何进行图文环绕布局 原创
    2019-05-07 开始记笔记vue
    vue src 拼接
    js 反选 全选看出你处于哪个阶段!
    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)
  • 原文地址:https://www.cnblogs.com/luckyboylch/p/12330021.html
Copyright © 2011-2022 走看看