HTML简单知识的总结

2018-6-21 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

基本格式:

<!DOCTYPE  HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>制作我的第一个网页</title>

<style type="text/css">

h1{font-size;color;text-align:center}

</style>

</head>

<body>

<h1>Hello World! </h1>

</body>

</html>

注释:<!--注释文本-->

强调语气:<strong>,<em>:前者实现加粗再加粗,后者实现加粗加斜   体。

<span>写在style 里设置单独样式。

<q></q>标签:引用简短文本,使引用的诗句等自己出现双引号

<blockquote>: 引用长文本,增加缩进量。

<br />: 换行标签。

  代码之间实现空格。

<hr />: 段落之间分隔的横线。

<address>: 定义一个地址(比如电子邮件地址)  ,签名或者文档的作者身份。在浏览器上显示的样式为斜体。

<code>: 加入简短代码。

<pre>: 加入一段长代码。


Ul-li标签: 添加新闻信息列表, 图片列表, 无序文字列表

Ol-li 标签:添加有序列表,与ul-li 标签类似。

<div> :把一些独立的逻辑部分划分出来,形成栏目板块。其中还可使用

<div  id=  >给板块命名。

<table>: 制作表格。 

CSS 样式为表格添加边框:<style  type=”text/css”>

黑色边框: table tr td,th{border:1px solid #000;}</style>

<caption>为表格添加标题和摘要。  <table  summary=’’”表格简介文本”>

<caption>标题文本</caption> </table>

<a>  实现超链接。<a href=”目标网址”    title=“鼠标滑过显示的文本”>链接显示的文本</a>    默认在当前浏览器窗口打开,添加targetblank  在新的浏览器窗口打开。

<mailto>  在网页中链接Email 地址。  <a href=”mailto:  yy@qqcom ?

Cc抄送地址=zsq@qqcom  &  bcc密件抄送地址=zjj@qqcom  &

subject=”主题”  &  body=“邮件内容”>发送</a> 给多个收件人发送,用分号隔开。第一个参数用?开头,之后用 &隔开。 

<img> 添加图片。Src=”标识图像的位置。” alt=”指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本”

Title=“提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)”

<form>  表单标签,与用户交互使得浏览器可以处理用户的数据。

<form  method=”数据传送的方式get/postaction=”浏览器输入的数据被传送到的地方,如一个 PHP 页面savephp””

<label  for="username">用户名:</label>

<input type="text" name="username" id="username" value="" />

<label  for="pass">密码:</label>

<input type="password" name="pass" id="pass" value="" />    用户名: 肯定存,啊 密码:

表单文本输入框,密码输入框:<form><input  type=text/password

name=”名称(以备后台使用)” value=“文本(设置默认值,提示作用)”>

输入<textarearows(height)=”行数” cols(width)

=”列数”>文本</textarea>

<input type=”radio/checkbox)”

value=”  值 ” name=”  名 称 ” checked=  “  checked  ”  /> 当 设 置

checked=”checked”时,该选项被默认选中。同一组按钮,name 取值必须相同。

下拉列表框<select>:<label> XX </label>

<select>

<option value=”读书” selected=selected被默>读书</option></select>

提交按钮  submit<input  type=”submit”  value=”提交”>重置按钮  reset<input  type=”reset”  value=”重置”>

<label><label for=”控件id 名称”>慢跑  </label>

<input  type=”checkbox”  name=”gender”  id=”jogging”  />

for 属性的值与id 属性值一定要相同。

Placeholder<input  type=”email”  id=”email”  placeholder=”Enter  email”>该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

CSS 样式:定义文本的显示样式,如字体大小(font-size),颜色(color),加粗(font-weight:bold)等。

注释语句:/*注释语句*/。

内联式 CSS 样式:<p  style=”color:red    font-size:12px”>红色字</p>

嵌入式 CSS 样式:<style  type=”text/css”>span{  }</style>

 CSS 在head 里写:<link href=”XX。css” rel=”stylesheet”

type=”text/css”>,在XX。css 里写:span{  }

三种方式的优先级:相同权值下,内联式  >嵌入式  >外部式。但是,嵌入式 >外部式的前提为嵌入式的位置一定在外部式的后面。

选择器:每一条CSS 样式定义由两部分组成:选择器{样式;} 

标签选择器:如<html>,<body>,<h1>,<img>,<p  font,,>。

择器。类选择名称(可任意起名,。XX){css 样式代码;} -> <span class=”XX”></span>

ID #类选择名称(可任意,#XX){css 样式代码;} -><span

id=”XX”></span>只能在文档中使用一次。

>子选择器:用于选择指定标签元素的第一代子元素。【直接后代 first>span{border:1px  solid  red;}  <span>我还是一个<span>胆小如</span>的小女孩</span>

包含后代选择器:加入空格,用于选择指定标签元素下的后辈元素。【所有子后代元素】

通用选择器:由一个*指定,匹配html 中所有标签元素。在style 里:

*{color:red;}

伪类选择符    hover它允许给html 不存在的标签(标签的某种状态)设置样式 a:hover{color:red}鼠标滑过时字体变为红色。

分组选择符    为多个标签元素设置同一个样式。  如h1,p{  }。

继承:有些样式具有继承性如color,有些不具有如border。具有继承性的允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代

权值:标签的权值为1,类选择符的权值为10,ID 选择符的权值最高 100。

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

warning{color:white;} /*权值为10*/

p spanwarning{color:purple;} /*权值为1+1+10=12*/

#footer note p{color:yellow;} /*权值为100+10+1=111*/ 特殊性:继承也有权值,但是只有0。1 最低。

层叠:当有相同权重值时,后面的样式会覆盖前面的样式。

重要性 important :p{color:red!important;}这时p 段落中的文本会显示红色。important 要写在分号前面。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




标签: vue-router的使用方法介绍input框的23种类型HTML简单知识的总结


Powered by emlog 京ICP备12006971号-1 sitemap