前端之HTML、CSS（一）

　　开发工具

    • 编辑器

　　Dreamware、Sublime、Visual Studio Code、WebStorm

    • 浏览器

　　Chrome、IE（Edge）、Safari、FireFox、Opera

　　浏览器内核：浏览器内核分为两个部分：渲染引擎和JS引擎。渲染引擎是通过获取HTML、XML以及图片，引入CSS格式，渲染显示形成网页；而JS引擎是通过解析JavaScript，动态显示网页。

　　浏览器内核主要类别：Trident（IE）、Gecko（FireFox）、Webkit（Safari）、Chromium/Blink（Chrome）、Presto（Opera），其中win10发布，Edge使用EdgeHTML内核，Opera浏览器目前使用Blink内核，Presto已经废弃。

　　移动端浏览器内核主要使用系统内置浏览器内核，一般为Webkit内核或者Trident内核。

　　浏览器使用情况统计：http://tongji.baidu.com/data/browser

　　网页

　　网页是由文字、图片、超链接等元素构成，网页形成：前端代码由浏览器渲染形成网页。

　　Web标准：结构标准（Structure）、表现标准（Presentation）、行为标准（Behavior）

    • 结构标准：HTML，内容
    • 表现标准：CSS，形式
    • 行为标准：JavaScript，效果

　　HTML

　　HTML：Hyper Text Markup Language-超文本标记语言。

　　HTML骨架结构

 <html>

     <head>

         <title>   </title>

     </head>

     <body>

     </body>

 </html>

　　HTML标签

　　排版标签

　　标题标签：闭标签，<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，加粗效果，依次缩小。格式：<hn>content</hn>，其中n代表1，2，3，4，5，6。注意：<title></title>标签表示文档标题标签。　

 <!DOCTYPE html>

 <html>

 <head>

     <title>标题标签-测试</title>

 </head>

 <body>

     <h1>一级标题</h1>

     <h2>二级标题</h2>

     <h3>三级标题</h3>

     <h4>四级标题</h4>

     <h5>五级标题</h5>

     <h6>六级标题</h6>

 </body>

 </html>

　　段落标签：闭标签，<p>，效果分段会自动换行显示。格式：<p>content</p>.

 <!DOCTYPE html>

 <html>

 <head>

     <title>段落标签-测试</title>

 </head>

 <body>

     <p>这是一个段落</p>

 </body>

 </html>

　　水平线标签：开标签，<hr />，效果一条水平实线。格式：<hr />。

 <!DOCTYPE html>

 <html>

 <head>

     <title>水平线标签-测试</title>

 </head>

 <body>

     <p>这是一个段落</p>

     <hr />

     <p>这是另外一个段落</p>

 </body>

 </html>

　　换行标签：开标签，<br />，效果显示换行。格式：<br />。注意：段落标签和换行标签都可以产生换行效果，但是段落标签换行产生行间距大于换行标签产生的换行。

 !DOCTYPE html>

 <html>

 <head>

     <title>换行标签-测试</title>

 </head>

 <body>

     <p>All growth is a leap<br /> in the dark.</p>

 </body>

 </html>

　　盒子标签：闭标签，<div>、<span>，分别为块级元素和行级元素的无语义盒子，无特殊效果，CSS布局使用。格式：<div>content</div>、<span>content</span>。

 <!DOCTYPE html>

 <html>

 <head>

     <title>div-span标签-测试</title>

 </head>

 <body>

     <div>块级元素内容</div>

     <p>这是一个<span>完整的</span>段落</p>

     <div>块级元素一</div>

     <div>块级元素二</div>

     <span>行级元素一</span>

     <span>行级元素二</span>

 </body>

 </html>

　　文本格式化标签

　　粗体标签：闭标签，<b>、<strong>，效果文本以粗体方式显示。格式：<b>content</b>，<strong>content</strong>。推荐使用：<strong>

 <!DOCTYPE html>

 <html>

 <head>

     <title>粗体标签-测试</title>

 </head>

 <body>

     <b>文本加粗</b>

     <strong>文本加粗</strong>

 </body>

 </html>

　　斜体标签：闭标签，<i>、<em>，效果文本以斜体方式显示。格式：<i>content</i>，<em>content</em>。推荐使用：<em>

 <!DOCTYPE html>

 <html>

 <head>

     <title>粗体标签-测试</title>

 </head>

 <body>

     <i>文本倾斜</i>

     <em>文本倾斜</em>

 </body>

 </html>

　　删除线标签：闭标签，<s>、<del>，效果文本加删除线形式显示。格式：<s>content</s>、<del>content</del>。推荐使用：<del>

 <!DOCTYPE html>

 <html>

 <head>

     <title>删除线标签-测试</title>

 </head>

 <body>

     <s>文本加删除线</s>

     <del>文本加删除线</del>

 </body>

 </html>

　　下划线标签：闭标签，<u>、<ins>，效果文本加下划线形式显示。格式：<u>content</u>、<ins>content</content>。推荐使用：<ins>

 <!DOCTYPE html>

 <html>

 <head>

     <title>下划线标签-测试</title>

 </head>

 <body>

     <u>文本加下划线</u>

     <ins>文本加下划线</ins>

 </body>

 </html>

　　图片标签

开标签，基本格式：<img src=“url” />，效果是添加图片。src为图片标签的必须属性，表示图片的位置属性。

标记属性
属性 属性值 描述
src URL 图片路径，必需
alt 文本 图像无法显示的替换文本
title 文本 鼠标悬停图像时的显示文本
width 像素

图像显示宽度
height 像素 图像显示高度
border 数字 图像边框的粗细,缺省：无边框

　　标记属性的格式：<img src="URL", alt="content-text", title="title-text", width="npx", height="npx", border="1" />,其中n取任意数字，px为像素单位。属性中只有src为必需，推荐添加alt属性。

 <!DOCTYPE html>

 <html>

 <head>

     <title>图片标签-测试</title>

 </head>

 <body>

     <img src="content-01.jpg", title="三体", width="100px", height="100px", border="1" />

     <br />

     <img src="content-02.gif", alt="流浪地球" />

 </body>

 </html>

　　链接标签

链接标签又称为锚点标签，基本格式：<a href="URL">content</a>，效果是添加跳转链接。href同图片标签中src一样，是位置属性，必需设置。

标记属性
属性 属性值 描述
href URL 链接跳转位置
target _blank 链接以新窗口打开，缺省：当前窗口打开

　　注意：href属性中的属性值URL，外部链接：href="http://www.xxx.com"；内部链接：href="statics/xxx.html"；空链接：href="#"；书签链接：href="#id"。另外，链接标签中的内容content可以是图像，音频等，不局限为文本信息。

 <!DOCTYPE html>

 <html>

 <head>

     <title>链接标签-测试</title>

 </head>

 <body>

     <a href="http://www.baidu.com", target="_blank">百度</a>

     <a href="index.html">首页</a>

     <a href="#">空链接</a>

     <a href="#paragraph">Do it</a>

     <p>Beautiful is better than ugly.</p>

     <p>Explicit is better than implicit.</p>

     <p>Simple is better than complex.</p>

     <p>Complex is better than complicated.</p>

     <p>Flat is better than nested.</p>

     <p>Sparse is better than dense.</p>

     <img src="python.jpg", alt="python", width="400px", height="400px">

     <p>Readability counts.</p>

     <p>Special cases aren't special enough to break the rules.</p>

     <p>Although practicality beats purity.</p>

     <p>Errors should never pass silently.</p>

     <p>Unless explicitly silenced.</p>

     <p>In the face of ambiguity, refuse the temptation to guess.</p>

     <p>There should be one-- and preferably only one --obvious way to do it.</p>

     <p>Although that way may not be obvious at first unless you're Dutch.</p>

     <p id="paragraph">Now is better than never.</p>

     <p>Although never is often better than *right* now.</p>

     <p> the implementation is hard to explain, it's a bad idea.</p>

     <p>If the implementation is easy to explain, it may be a good idea.</p>

     <p>Na>mespaces are one honking great idea -- let's do more of those!</p>

 </body>

 </html>

　　base标签：base标签同<meta charset="UTF-8" >以及<title>标签，定位于<head>内，效果设定当前页面为根页面，链接页面均使用新窗口打开，多个页面链接时，不用为每个页面设定target="_blank"属性。书签链接一般时定位于当前页面，可以使用target="_self"来特殊设定。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>链接标签-测试</title>

     <base target="_blank">

 </head>

 <body>

     <a href="http://www.baidu.com", target="_blank">百度</a>

     <a href="index.html">首页</a>

     <a href="#">空链接</a>

     <a href="#paragraph">Do it</a>

     <p>Beautiful is better than ugly.</p>

     <p>Explicit is better than implicit.</p>

     <p>Simple is better than complex.</p>

     <p>Complex is better than complicated.</p>

     <p>Flat is better than nested.</p>

     <p>Sparse is better than dense.</p>

     <p>Readability counts.</p>

     <p>Special cases aren't special enough to break the rules.</p>

     <p>Although practicality beats purity.</p>

     <p>Errors should never pass silently.</p>

     <p>Unless explicitly silenced.</p>

     <p>In the face of ambiguity, refuse the temptation to guess.</p>

     <p>There should be one-- and preferably only one --obvious way to do it.</p>

     <p>Although that way may not be obvious at first unless you're Dutch.</p>

     <p id="paragraph">Now is better than never.</p>

     <p>Although never is often better than *right* now.</p>

     <p> the implementation is hard to explain, it's a bad idea.</p>

     <p>If the implementation is easy to explain, it may be a good idea.</p>

     <p>Na>mespaces are one honking great idea -- let's do more of those!</p>

 </body>

 </html>

特殊字符标签

特殊字符标签
  空格字符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
© 版权号 &copy;
® 商标号 &reg;
× 乘号 &times;
÷  除号 &divide; 
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>特殊符号标签-测试</title>

     <base target="_blank">

 </head>

 <body>

     <div>HT&nbsp;ML&nbsp;&nbsp;HTML</div>

     <div>&lt;div&gt;</div>

     <div>&amp;</div>

     <div>&copy;</div>

     <div>&reg;</div>

     <div>2&times;5</div>

     <div>4&divide;2</div>

 </body>

 </html>

　　注释标签

　　注释，不在页面显示，不被执行。格式：<!-- 注释语句 -->，注释利人利己，很有必要。

　　 路径

　　相对路径

　　1.图像文件和HTML文件位于同一文件夹，只需输入图像文件名即可。

　　

　　<img sre="images.jpg" />

　　2.图像文件位于HTML文件的下一级文件夹，输入文件夹名/文件名。

　　

　　<img src="文件夹-a/images.jpg" />

　　3.图像文件位于HTML文件的上一级文件夹，在图像文件名之前加../；如果上两级文件夹，则使用../../，依此类推。

　　

　　<img src="../images.jpg" />

　　

　　<img src="../../images.jpg" />

　　4.图像文件位于上一级文件夹的同级文件夹的子文件夹，输入../返回上一级文件夹后/同级文件名/子文件夹名/图像文件名，依此方法类推。

　　

　　<img src="../../文件夹-2/文件夹-a/images.jpg" />

　　绝对路径

　　盘符:\根目录\子目录\文件名.扩展名，例如：D:\test\templates\icon.jpg。或者URL图片地位：https://img2018.cnblogs.com/blog/1492256/201902/1492256-20190216222217245-682202389.png。推荐使用相对路径

认识HTML中文本、图片、链接标签和路径的更多相关文章

  1. HTML之基本语法（链接标签、路径的介绍和使用）

    一.链接标签 语法:<a href="目标地址">这个标签上展示的内容</a> 作用:可以实现在当前页面跳转到新页面的操作 属性 1.target这个属性可 ...

  2. 利用vba将excel中的图片链接直接转换为图片

    Sub test() Dim rg As Range, shp As Shape Rem --------------------------------------------------- Rem ...

  3. 复制图片链接和标题生成Markdown文本

    写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...

  4. Python爬虫实例（一）爬取百度贴吧帖子中的图片

    程序功能说明:爬取百度贴吧帖子中的图片,用户输入贴吧名称和要爬取的起始和终止页数即可进行爬取. 思路分析: 一.指定贴吧url的获取 例如我们进入秦时明月吧,提取并分析其有效url如下 http:// ...

  5. Python 爬虫练习： 爬取百度贴吧中的图片

    背景:最近开始看一些Python爬虫相关的知识,就在网上找了一些简单已与练习的一些爬虫脚本 实现功能:1,读取用户想要爬取的贴吧 2,读取用户先要爬取某个贴吧的页数范围 3,爬取每个贴吧中用户输入的页 ...

  6. C#解析Markdown文档，实现替换图片链接操作

    前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...

  7. Angular 文档中链接的修改路径

    在 Angular 文档程序中的左侧链接的修改路径在哪里? 如下图所示的修改路径. 左侧链接的修改路径在 angular-cn\aio\content\navigation.json 这个文件中. 你 ...

  8. dedecms 文章页图片改为绝对路径

    这几天在网站改版,想把网站做大,想做频道页二级域名,于是在做网站的过程中发现一个问题,dedecms开设二级域名后,在二级域名的文章页无法显示图片,查看源代码后发现问题,由于dedecms文章页中的图 ...

  9. 从文本中提取图片路径（java 解析富文本处理 img 标签）

    很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 怎样将富文本的图片的 src 获取出来? 方法一: 利用正则表达式: pub ...

随机推荐

  1. pandas sort_values 排序后， index 也发生了改变，不改变的情况下需要 reset_index(drop = True)

    shenpi.sort_values(by=['apply_date'],ascending=True,inplace=True)shenpi.reset_index(drop = True)

  2. Luogu 1606 [USACO07FEB]白银莲花池Lilypad Pond

    感觉应当挺简单的,但是弄了好久……菜死了 如果不考虑那些为$1$的点,直接跑个最短路计数就好了,但是我们现在有一些边可以不用付出代价,那么只要在连边的时候先预处理搜一下就好了. 原来的想法是拆点,但是 ...

  3. hdu 4286 （list的reverse时间复杂度为n）

    list 的翻转reverse源码: // 将链表倒置 // 其算法核心是历遍链表, 每次取出一个结点, 并插入到链表起始点 // 历遍完成后链表满足倒置 template <class T, ...

  4. js-简单的作业

    作业 1 将课堂 偶数奇数和 猜数字游戏 电话银行转for循环 2 编写 “个人所得税计算器”函数 10000 计算个税的方法: 3500 以下免征 6500 3500 ~ 5000 部分 缴纳 3% ...

  5. Spring源码研究：数据绑定

    在做Spring MVC时,我们只需用@Controllor来标记Controllor的bean,再用@RequestMapping("标记")来标记需要接受请求的方法,方法中第一 ...

  6. Javascript脚本 : eval()函数

    Javascript 中 eval(X)函数 是将参数 当做语句来执行 var number1='1+2'; alert(number1); 输出为 '12': var number2=eval('1 ...

  7. [转]解读Unity中的CG编写Shader系列3——表面剔除与剪裁模式

    在上一个例子中,我们得到了由mesh组件传递的信息经过数学转换至合适的颜色区间以颜色的形式着色到物体上.这篇文章将要在此基础上研究片段的擦除(discarding fragments)和前面剪裁.后面 ...

  8. 在libuv中使用openssl建立ssl连接

    在libuv中使用openssl建立ssl连接 @(blogs) 使用openssl进行加密通信时,通常是先建立socket连接,然后使用SSL_XXX系列函数在普通socket之上建立安全连接,然后 ...

  9. Linux 意外操作后如何进行数据抢救

    Linux 意外操作后如何进行数据抢救 在 GUI 中使用  shift + delete  组合键或是 CLI 下使用 rm -rf 删除选项,这个文件并没有从硬盘(或是其它存储设备)上彻底销毁.当 ...

  10. Python爬取招聘信息，并且存储到MySQL数据库中

    前面一篇文章主要讲述,如何通过Python爬取招聘信息,且爬取的日期为前一天的,同时将爬取的内容保存到数据库中:这篇文章主要讲述如何将python文件压缩成exe可执行文件,供后面的操作. 这系列文章 ...