HTML主要标签应用
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 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
如需显示小于号,我们必须这样写:< 或< 空格:
<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主要标签应用的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- idea为本地项目创建仓库并git到云上
1.为本地项目创建一个本地仓库: 2.在码云上创建一个仓库,(初始化的时候先不要创建README.md文件) 3.本地仓库关联远程仓库:右键项目选址git>>repository>& ...
- Python-使用tkinter实现的Django服务进程管理工具
import tkinter import subprocess import os import time import re import sys from tkinter import Labe ...
- 序列化和反序列化,请使用MessagePack
官网:https://msgpack.org/ 这个序列化的工具是今天看了dudu 的博客后去尝试使用的,果然差距很大. 对同样的对象进行序列化后,发现msgpack的大小仅有通常压缩工具Newton ...
- Oauth2.0认证流程
- tomcat发布时候jar包问题
今天遇到个问题就是,启动tomcat时,报:java.lang.NullPointerException at org.apache.jsp.**_jsp.jspInit(index_jsp.java ...
- spring和springmvc包扫描问题
写这篇博客之前,橘子松必须感慨下!!找了我一下午加一晚上(md),问了几个朋友也没找到.凉了啊 在搭建ssm之前,我把controller service mapper包扫描用基本包扫描 都写在a ...
- Python线程池与进程池
Python线程池与进程池 前言 前面我们已经将线程并发编程与进程并行编程全部摸了个透,其实我第一次学习他们的时候感觉非常困难甚至是吃力.因为概念实在是太多了,各种锁,数据共享同步,各种方法等等让人十 ...
- 手把手教你玩转Git
文章已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号 码出Offer 领取各种学习资料! 微信公众号码出Offer Git应用 一.初识Git 1.1 Git的简史 同生活中 ...
- Hexo学习
01.安装 Node.js 打开官方网站 https://nodejs.org 267b6d6d335cf62907c70321a1cbd3b 安装步骤非常简单,一直next,下一步就可以了,默认安装 ...
- 前端进阶笔记(一)---JS语言通识
一.语言按照语法分类 1.非形式语言:中文 英文 2.形式语言:乔姆斯基谱系(四种文法 上下文包含文法) 0型 无限制文法 1型 上下文相关文法 2型 上下文无关文法 正则文法 二 产生式(BNF) ...