html属性值可以不用引号吗，实例验证

tml属性值可以不用引号吗，实例验证

html属性值可以不用引号

HTML元素的属性值可以不适用引号来包裹，浏览器一样可以将其进行渲染。不过，如果这样写HTML的代码的话，属性与属性值之间需要用空格来进行隔开，避免后面的属性变成前面属性的属性值。

提示：虽然如此，但是还是建议使用引号来写HTML的代码，个人感觉这样更规范，更便于阅读和对代码的维护、管理。

html属性值不加引号实例代码，及在线编辑器

下方的实例中，编写了两个链接的a元素，并添加多个属性和属性值，且都不使用引号，其中一个使用空格隔开属性值，一个未使用，运行一下看看效果如何：

<a href=https://www.x1y1z1.com/ style=color:green target=_blank>笨鸟工具网站首页，使用空格隔开，点击可打开本站首页，功能与加引号一样</a>
<br>
<a href=https://www.x1y1z1.com/style=color:green>笨鸟工具网站首页，未使用空格，看看文字是否为绿色，看看链接是否还指向首页？</a>

原文：html属性值可以不用引号吗，实例验证 | HTML教程

免责声明：内容仅供参考。

TML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

1 HTML骨架格式

日常生活的书信，我们要遵循共同的约定。

同理：HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html结构：包括head body
html标签是以尖括号包围的关键字
html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
html通常都有属性，格式：属性名＝“属性值”(多个属性之间空格隔开)
html标签不区分大小写,建议小写

2 html基本标签

HTML标签

作用：所有HTML中标签的一个根节点。

head标签

作用：用于存放：title,meta,base,style,script,link

注意：在head标签中我们必须要设置的标签是title

title标签

作用：让页面拥有一个属于自己的标题。

body标签

作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img

3 颜色的表示方式

color:文本的颜色
bgcolor:背景色
background:背景图片

第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二种方式：RGB模式

第三种：十六进制

#000000 #ffffff #325687 #377405

4 文档类型<!DOCTYPE>（重点）

<!DOCTYPE html>这句话就是告诉我们使用哪个html版本，我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

5 HTML标签的语义化（重点）

所谓标签语义化，就是指标签的含义。

为什么要有语义化标签：方便代码的阅读和维护，同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容，使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性，不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

6 总结：（重要知识点）

双标签

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

单标签

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版标签

1.注释标签：<!–注释–>
-------------------------------------
2.换行标签：<br/>
-------------------------------------
3.段落标签：<p>文本文字
   特点：段与段之间有行高
   属性：align对齐方式
           (left：左对齐 center：居中 right：右对齐)
-------------------------------------
4.水平线标签:<hr/>
   属性:
        width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
        size: 水平线的粗细 (像素表示，例如：10px)
        color: 水平线的颜色
        align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
-------------------------------------
5.容器标签（重点）
     <div>:块级标签，独占一行，换行
     <span>:行级标签，所有内容都在同一行作用
     <div>:主要是结合css页面分块布局
     <span>:进行友好提示信息

标题标签 (熟记)

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表标签

容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序

无序列表 ul （重点）

无序列表标签： <ul></ul>
    属性：type :三个值，分别为：
           circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
    列表项：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。

无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol

有序列表标签：<ol>
      属性：type：1、A、a、I、i（数字、字母、罗马数字）
      列表项： <li></li>

定义列表dl

\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>

dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2
...

图片标签

独立标签

属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）

属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。

如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

、HTML基本信息

注释：

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

title：网页标题
meta：描述性标签，描述网站的信息，用来做SEO

charset="UTF-8"
name="keyword" content=""关键词
name="descrisption" content=""描述

body：代表网页主题

二、网页基本标签

标题标签

<h1>一级标签</h1>一直到6级标签

段落标签

<p>段落标签</p>

换行标签

<br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释

特殊字符

空格 ---->一个空格
大于号 >
小于号<
版权符号©

特殊符号就是 & xxx ;

三、图像标签

src 图像地址必填
alt 图像的代替文字(找不到图片的时候显示) 必填
title 鼠标悬停提示文字
width 图像的宽度
height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径，要跳转带那个位置必填
target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

从一个页面链接到另一个页面

锚链接

第一步需要一个标记使用name做标记
第二步跳转到标记使用#标记
<a name="top" ></a>
<a href="#top"></a>
上面是页面内的跳转

<a name="down"></a>
<a href="第一个页面的path#down"></a>
页面间的跳转

功能性链接

邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度、左右都是行内元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

<ol> <li></li> </ol>

无序列表

<ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

video
<video src="path" controls autoplay></video>
src:资源路径
controls控制条
autoplay自动播放

音频元素

audio
<audio src="" controls autoplay></audio>

九、页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
atricle	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

十、iframe内联框架

src必填
width
heigth
name标记
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 规定如何发送表单数据常用psot、get
action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text
name	指定表单元素的名称必填，用来后台读取
value	元素的初试值。type为radio时必须指定一个值
size	指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为txet或password时，输入的最大字符数
cheaked	type为radio或cheackbox时，指定按钮是否被选中

单选框

input type="radio"
value 单选框的值
name ：表示组，name一样一次只能选一个，name不一样可以选多个
checked默认选中的

多选框

input type="checkbox"
value="sleep"
name="hooby"
checked默认选中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

placeholder="提示信息" 在输入框上

非空判断

required

正则表达式验证

pattern
<input type="text" name="mail" pattern="正则表达式">

高级验证使用js

在线咨询

上一篇：Bresenham画线算法及实践
下一篇：HTML-盒子模型的应用

您的项目需求

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

整合营销服务商