20190322-a标签、img标签、三列表、特殊字符实体、表格
目录
1.a标签
a标签的属性
锚点
2.img标签
img标签的属性
图像热区
3.三列表
有序列表(Ordered List) ol>li
无序列表(Unordered List) ul>li
定义列表(Definition List) dl>dt/dd
列表样式(list-style-type)
4.特殊字符实体
<(大于号) < >(小于号)> &(和)& “”(引号) " (空格)
5.HTML表格
<caption> 表格标题
<table> 表格
<thead>或<th> 表头
<tbody> 表体
<tfoot> 表注(底部)
<tr> 行
<td> 单元格
内容
1.a标签
1.1a标签的属性: href、target、title、hreflang、type
1.1.1href属性
href="" (跳转不成功,Default property)
href="https://www.baidu.com/" (具体地址)
href="mailto:953889703@qq.com" (邮箱地址,Foxmail)
href="#" (禁止跳转)
1.1.2target属性
target="_self" (当前窗口打开,Default property)
target="_blank" (新窗口打开)
target="_parent" (父级框架集中打开)
target="_top" (整个窗口打开)
target="frame name" (指定框架打开)
1.1.3title属性
title="logo" (附加的备注描述性信息)
1.2锚点
1.2.1跳转本页面
<a href="#myname">跳转到本页面的name点上</a>
<a name="myname"></a>
1.2.2跳转另一个页面
<a href="demo.html#myname">跳转到demo的name点上</a>
<a name="myname"></a>
2.img标签
2.1img的属性:src、alt、width、usemap、ismap
2.1.1src属性
src="URL"
src="http://www.baidu.com/1.png" (相对路径,网站路径)
src="./images/1.png" (相对路径,文档路径)
src="F:/H1901/1.png" (绝对路径,物理路径,网盘出发)
2.1.2alt属性
alt="logo" (附加的备注描述性信息)
2.1.3width属性
width="100" (图像大小)
2.2图像热区
2.2.1热区:网页上进行链接的一个区域,如中国地区用热区分割每一个带链接的省市
2.2.2热点:在图像地图中设定作用域的标记
2.2.3基本语法
- <img src="URL" usemap="#mymap"/>
- <map name="mymap">
- <area shape="形状" coords="坐标值" href="URL"/>
- </map>
area标签
<area shape="rect" coords="x1,y1,x2,y2" href="URL"/> (rect:矩形;x1,y1:第一个点;x2,y2:第二个点)
<area shape="circle" coords="x,y,r" href="URL"/> (circle:圆形;x,y:圆点;r:半径)
<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="URL"/> (poly:多边形;x1,y1:第一个点;x2,y2:第二个点;x3,y3:第三个点,故该图形为三角形)
3.三列表
3.1有序列表
- <ol type="标记类型" start="步进值" reversed="是否倒序排列">
- <li></li>
- <li></li>
- <li></li>
- </ol>
3.1.1type属性
type="1" (标记是数字,Default property)
type="a" (标记是小写英文字母)
type="A" (标记是大写英文字母upper-alpha)
type="i" (标记是小写罗马字母lower-roman)
type="I" (标记是大写罗马字母)
3.1.2start属性
start="2"(从数字2开始排列)
3.1.3reversed属性
reversed="reversed" (倒置排列)
3.2无序列表
- <ul type="标记类型">
- <li></li>
- <li></li>
- <li></li>
- </ul>
3.2.1type属性
type="disc"(标记是实心圆,Default property)
type="square"(标记是实心方形)
type="circle"(标记是空心圆)
type="none"(去掉标记)
3.3定义列表
- <dl>
- <dt>HTML</dt>
- <dd>超文本标记语言</dd>
- <dd>写给浏览器</dd>
- </dl>
3.4列表样式
3.4.1list-style-type : "disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin";
3.4.2自定义项目符号list-style-image : none | url ( URL);
3.4.3自定义列表符号位置list-style-position: outside | inside | inherit(位于文本的左侧。列表项目标记放置在文本以外,且环绕文本 不根据标记对齐 | 放置在文本以内,且环绕文本根据标记对齐 | 继承)
4.特殊字符实体
显示结果 描述 实体名 实体号
空格
< 小于号 < <
> 大于号 > >
& and符号 & &
“” 引号 " "
详细参考:https://www.jb51.net/onlineread/htmlchar.htm
5.HTML表格
5.1基本语法
5.1.1完整版
- <table border="1">
- <!--Table Header-->
- <thead>
- <tr> <!--定义单元行-->
- <th> <!--定义标题单元格-->
- </th>
- </tr>
- </thead>
- <!--Table Body-->
- <tbody>
- <tr>
- <td> <!--定义单元格-->
- </td>
- </tr>
- </tbody>
- <!--Table Footer-->
- <tfoot>
- <tr>
- <td>
- </td>
- </tr>
- </tfoot>
- </table>
5.1.2简化版
- <table border="1">
- <tr>
- <td>单元格1</td>
- <td>单元格2</td>
- <td>单元格3</td>
- </tr>
- </table>
5.2表格的属性
5.2.1border属性
border="1" (数值越大,边框越大,取值为1-6)
5.2.2cells-属性
cellspacing="0" (单元格间距)
cellpadding="0" (边框与内容间间距)
5.2.3border--属性
border-spacing="0" (table边框与单元格边框间间距)
border-collapse="separate" (分离边框)
border-collapse="collapse" (合并单一边框,忽略border-spacing、empty-cells)
5.2.4宽高背景属性
width="100" (宽100像素)
height="100" (高100像素)
bgcolor="red"(背景红色)
background="url()" (背景图)
5.2.5文字排列属性
align="left/center/right" (居左/中/右)
valign="top/middle/bottom" (居顶/中/底)
5.2.6跨行列属性
colspan="3" (跨列,算上自己,即跨2列)
rowspan="3" (跨行,即跨3行)
5.3特性
独占一行 display:table
不给宽高,由内容撑开
支持margin:0 auto;
padding使用效果奇怪
单元格默认根据内容百分比平分table宽高
行列宽取决于当前行列中最高最宽的单元格
th内容上下居中 居中对齐 文字加粗
td内容上下居中 居左对齐
td给固定宽时,完全等分table宽度
td不支持margin,padding效果奇怪
table到td之间不能嵌套任意其他元素
thead、tbody、tfoot可以省略不写,浏览器会自动生成
20190322-a标签、img标签、三列表、特殊字符实体、表格的更多相关文章
- 对HTML5标签的认识(三)
这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...
- Struts2的标签库(三)——控制标签
Struts2的标签库(三) --控制标签 1.if/elseif/else标签 用于分支控制,取代JSP中的if语句,根据一个boolean(test属性的值)值判断是否进行下一步运算或者输出等. ...
- [19/05/15-星期三] HTML_body标签(超链接标签和锚点)
一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- html5新增标签/删除标签
闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...
- 容器编排系统之K8s资源标签、标签选择器、资源注解
前文我们聊到了使用k8s资源配置清单定义资源的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14132890.html:今天我们来聊下资源标签,标签选 ...
- JSP自定义标签/自定义标签打包
有这样一个业务需求: 当我们在编辑某个用户时,需要设置该用户的角色,在转到编辑页面时,就需要自动勾选上该用户已经选择的角色,如下图: 当我们点击编辑时,会查询用户详细信息,以及角色集合传到编辑页面. ...
随机推荐
- SQA计划和验收测试规程设计
一.SQA(软件质量保证)的定义 软件质量保证(SQA-Software Quality Assurance)是建立一套有计划,有系统的方法,来向管理层保证拟定出的标准.步骤.实践和方法能够正确地被所 ...
- [Swift]LeetCode299. 猜数字游戏 | Bulls and Cows
You are playing the following Bulls and Cows game with your friend: You write down a number and ask ...
- [Swift]LeetCode919. 完全二叉树插入器 | Complete Binary Tree Inserter
A complete binary tree is a binary tree in which every level, except possibly the last, is completel ...
- [Swift]LeetCode940. 不同的子序列 II | Distinct Subsequences II
Given a string S, count the number of distinct, non-empty subsequences of S . Since the result may b ...
- 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题
今天来分享一下Redis几道常见的面试题: 如何解决缓存雪崩? 如何解决缓存穿透? 如何保证缓存与数据库双写时一致的问题? 一.缓存雪崩 1.1什么是缓存雪崩? 回顾一下我们为什么要用缓存(Redis ...
- Python -- socket 实现服务器之间的通信
现在需要做一个分布式课程设计(简单小游戏),三个人小组合作完成. 我需要设计一个登录注册服务器,接收来自网关服务器(消息中间件)的用户登录注册消息请求,然后生成访问数据库服务器的消息,发送给数据库服务 ...
- vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...
- Net Configuration Agent
提出Configuration Agent这样一个东西可能会让人感到奇怪,对于配置信息读取什么还需要一个Agent;那Agent的作用是什么,能达到一个怎样的目的,下面讲解为何需要Agent和其重要性 ...
- SpringBoot入门教程(六)SpringBoot2.0统一处理404,500等http错误跳转页
在做web项目的时候,大家对404.500等http状态码肯定并不陌生.然而无论是哪种"非正常"状态码,都不是我们想遇到的.尤其像一些500这种服务器内部错误,不愿意展示给用户的, ...
- Java基础3:深入理解String及包装类
更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...