HTML属性

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

HTML颜色

1、英文单词表示。 red、green

<p style="color:red">红色</p>

2、16进制代码 （0-f），用“#”加六位16制代码表示。 例如：#cccccc（相同可简写#ccc）、#000000（#000）

<h1 style="color:#cccccc">灰色</h1>

3、rgba（0~255,0~255,0~255,0~1），四位数表示。其中0~255代表颜色，0~1代表透明度。

<h1 style="color:rgba(255,0,0,0.5)>红色</h1>

HTML路径

绝对路径：从根开始找，电脑磁盘路径

列如：E:\workspace\0601\html

相对路径：从自身位置开始找

同级文件夹 ./ （可省略）

上一级文件夹   ../

下一级文件夹   ./

HTML实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

如需显示小于号，我们必须这样写：&lt; 或<  空格： &nbsp; 

<a>标签

<a href=""></a>

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

自带 href 属性，它指定链接的目标。

1、页面跳转

<a href="网址">内容</a>-----注意网址的完整性

<a href="http://www.baidu.com"> 百度链接</a>

重要属性 target ，打开方式设定，默认在当前页打开，属性值：_blank 跳转页面打开

     用图像作为超链接

嵌套<img>标签

格式:<a href="URL"><img src="URL"></a>

注意点:边框的问题.

     2、定位

设置锚点

在要定位到的位置 找一个标签给他加id属性 属性值就是锚点名称

点击链接直接到定位锚点

<a href="#xx">定位</a>     ---链接点

...

<p id=xx>定位处内容</p>     ---锚点

    3、下载。其他

<a>标签跳转到的文件，格式浏览器打不开，则提供下载，例如：.zip、.rar等压缩包

<iframe>标签   窗口框架

在网页页面内放置另外页面

<iframe src="http://www.w3cschool.cc/"></iframe>

<img>标签

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

属性名

属性值

说明

src

URL

图片的路径

alt

字符串

给图片做注解

width

 像素（绝对设置）、百分比（相对设置） 图像大小，图像的宽

height

 像素（绝对设置）、百分比（相对设置） 图像大小，图像的高 
<img src="123.gif" alt="Smiley face" width="" height="">

width和height可只写一个，保持图片原比例。

属性名 属性值 说明

border

数字

图象边框

align

 left

图象靠左,文字靠右
right

图片靠右,文字靠左
top

文字往上靠

middle

文字靠中

bottom

文字靠下

列表标签<ol>、<ul>、<li>

<ol>与<ul>的内容只能是<li>，其他所有标签、内容，需要嵌套在<li>里面。

有序列表<ol>

<ol type=”形式”>

  <li>内容</li>

  <li>内容</li>

  <li>内容</li>

</ol>

无序列表用<ul>

<ul>

  <li>内容</li>

  <li>内容</li>

  <li>内容</li>

</ul>

为网站添加图标

使用<link>标签

<link rel="shortcut icon" href="favicon.ico">

属性：rel="shortcut icon"

图片必须为.ico格式，可网上制作。

背景色与文字设置

格式：<body bgcolor=”背景色” text=”文字颜色”>

内容距离整体页面的边距，行距

<body leftmargin=”像素” topmargin=”像素”>

自我学习问题：

1、字体颜色设置，可以用<span>,复制style属性

<span style=“color:blue”> </span>

不能单独一行，可用<br>断行

一段文字中只需要几个字变色时，可以嵌套在<p></p>中

<p>内容1

   <span style=“color:blue”>内容2 </span>

     内容3

</p>

2、起文件名尽量，不要有中文

3、注意代码格式的书写，美观

4、注释符号<!--     -->

HTML主要标签应用的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. 美国6w刀的远程工作高级工程师职位,说下在线评估, 倒在第一阶段, 认知能力测试?智商不够怎么办?!

    前几天刚被裁员了, 然后在Linkedin上面看到一个crossover的senior software engineer的职位,写的可以remote, 6w刀, 我第一次参加这个公司的这种在线测试, ...

  2. NuGet 应用指南

     一.前言 在产品开发过程中,一点有很多类库:这么多类库大家是如何管理的呢,TFS.SVN.Github……?在开发人员使用对应类库是否存在类库引用路径不一致.版本不一致问题.依赖类库版本不对应等一些 ...

  3. 列拖拽顺序调整-sortable.js使用

    最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...

  4. Fetch.AI 首席技术官Toby Simpson参与AMA活动

    感谢7月11日在YouTube上参与 Fetch.AI AMA的所有人.我们收到了大量的问题,遗憾的是我们没有时间回答其中的多数问题.如果你错过了现场AMA,你可以在下面观看全部内容: 在本文中,我们 ...

  5. 02 Vue指令

    Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...

  6. Python math 、cmath

    1.math dir(math) 2.cmath 复数运算

  7. VSCode, 当今最流行的免费开源代码编辑器，微软出品，必属精品

    什么是VSCode? Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于Windows,macOS和Linux.它内置了对JavaScript,T ...

  8. scala 数据结构（八 ）：-map映射操作

    在Scala中可以通过map映射操作来解决: 将集合中的每一个元素通过指定功能(函数)映射(转换)成新的结果集合这里其实就是所谓的将函数作为参数传递给另外一个函数,这是函数式编程的特点 以HashSe ...

  9. 机器学习实战基础（十）：sklearn中的数据预处理和特征工程（三） 数据预处理 Preprocessing & Impute 之 缺失值

    缺失值 机器学习和数据挖掘中所使用的数据,永远不可能是完美的.很多特征,对于分析和建模来说意义非凡,但对于实际收集数据的人却不是如此,因此数据挖掘之中,常常会有重要的字段缺失值很多,但又不能舍弃字段的 ...

  10. 目录(Django开发)

    python网络编程-socket编程 Django 笔记分享 Django之[基础篇] Django之[进阶篇] Django之 url组件 Django之 Models组件 Django之 adm ...