- 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
- 网页文件的扩展名:.html或.htm
HTML是一种标记语言(markup language),它不是一种编程语言。HTML使用标签来描述网页。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>对HTML基本格式的说明
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)不会显示在网页上。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
- <title>、</title>定义了网页标题,在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
head内常用标签
标签 意义 <title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部样式表文件 <meta/> 定义网页原信息 <!--标签的分类<h1></h1>--> <!DOCTYPE html> <!--lang="en" 表示网页的主要语言是英语--> <html lang="zh-CN"> <head> <!--定义网页原信息--> <meta charset="UTF-8"> <!--方便搜索引擎查找的,一个是keywords搜索关键字可以引导到到该网页,description相当于摘要--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> <!--标签页上显示的内容--> <title>My First HTML</title> <!--定义a标签的样式--> <style> a{ color:darkred; } </style> <!-- 定义JS代码或引入外部JS文件 <script>alert("Hello World")</script> --> <!--引入外部样式表文件text.css将a标签的颜色变为绿色--> <link rel="stylesheet" href="text.css"> <!-- 2秒后跳转到对应的网址,注意引号 <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head>
- <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部,不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址,注意引号--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--> <hr>
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">img标签中除了自带的属性,我们还可以给它添加一些自定义的属性
如以下的代码:
<img format="jpg" sx="自定义的属性" src="图片的路径" >
a标签也就是我们常见的超链接标签,所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
- 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
<a href="http://www.oldboyedu.com" target="_blank" id="自定义的ID值">点我</a>href属性指定目标网页地址。该地址可以有几种类型:
- 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
- 相对URL - 指当前站点中确切的路径(href="index.htm")
- 锚URL - 指向页面中的锚(href="#top")
target 属性:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
id 属性:
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
值得注意:
在HTML文档中插入ID:
<a id="ID为1">现在是ID为1的位置</a>在HTML文档中创建一个链接,点击此链接就可以调到相对应id的位置
<a href="#ID为1">点我跳到ID为1的位置</a>
显示结果 描述 实体名称 实体编号 空格   < 小于号 < < > 大于号 > > & 和号 & & " 引号 " " ' 撇号 ' (IE不支持) ' ¢ 分 ¢ ¢ £ 镑 £ £ ¥ 人民币/日元 ¥ ¥ € 欧元 € € § 小节 § § © 版权 © © ® 注册商标 ® ® ™ 商标 ™ ™ × 乘号 × × ÷ 除号 ÷ ÷ 值得注意的是:虽然 html 不区分大小写,但实体字符对大小写敏感。
下面来看一个实际的例子
<h1>海 燕</h1>上面不论两个字之间空的有多宽,都会默认是看做只有一个空格,如果想在两个字之间显示多个空格,就可以使用以下的方式
<h1>海 燕</h1>
span和div区别在于,div是一个块级元素,它包含的元素会自动换行。而span是行内元素,在它的前后不会换行。
span没有结构上的意义,只是单纯的应用样式,其他元素不适合时,就可以使用span元素。span可以作为div的子元素,但div不能是span的子元素,如果出现span中出现div不符合ws3c的页面标准。
特点:标签独占一行,可指定宽、高。
特性:
能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起,默认排列方式为从上至下
可以使用margin:0 auto居中对齐
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
特点:标签在一行内,宽度与高度由内容决定,只有在内容超过HTML的宽度时,才会换行。
特性:
无法设置宽高
margin上下无效,只有左右有效果,padding都有效果,会撑大空间;box-sizing:border-box;无效,因为该属性针对盒模型。
不会自动换行
常用的内联元素有:
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
列表标签的属性大概有以下几种
标签 描述 <ol> 定义有序列表 <ul> 定义无序列表,可以指定id、style、class等属性,还可以指定onclick等事件属性。 <li> 定义列表项 <dl> 用于定义术语列表。自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始 <dt> 定义标题列表项。可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等 <dd> 定义普通列表项。该元素可以包含与<div../>完全类似的内容
type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
栗子:
<ul type="disc"> <li>实心圆点-默认值</li> </ul> <ul type="circle"> <li>实心圆圈</li> </ul> <ul type="square"> <li>实心方块</li> </ul> <ul type="none"> <li>无样式</li> </ul>输出示例:
有序列表type属性值
并不是有序列表只能用1、2、3 ……来表示序列。也可以使用下面的方式:
type属性值 列表项的序号类型 1 数字1、2、3…… a 小写英文字母a、b、c…… A 大写英文字母A、B、C…… i 小写罗马数字i、ii、iii…… I 大写罗马数字I、II、III…… 有序列表的其他属性
属性 值 描述 reversed reversed 指定列表倒序(9,8,7...) start number一个整数值属性,指定了列表编号的起始值。这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。
栗子:
<dl> <dt>标题一</dt> <dd>标题一下的内容1</dd> <dt>标题二</dt> <dd>标题二下的内容1</dd> <dd>标题二下的内容2</dd> </dl>输出示例:
名称 标签 粗体标签 strong(定义加重语气)、b(定义粗体文本) 斜体标签 em(推荐)、i、cite 中划线标签 del(推荐,定义删除字)、s 下划线标签 ins(推荐)、u 上标标签 sup 下标标签 sub 大字号标签 big 小子号标签 small
我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?
在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,
Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug,发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则:20%的主要功能要重点测(eg:支付宝的支付功能,其他功能都是次要的)80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主