cndaqiang Web Linux DFT

HTML学习(二)常用标签,属性

2017-09-07
cndaqiang
web
 
RSS

HTML学习(二)常用标签,属性

参考

HTML 教程-菜鸟教程

HTML 教程 - w3school 在线教程

标签

标签之间可以嵌套

头head

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <link>,<style>, <meta> , <base>,<script>, <noscript> 头部内容不会被显示到网页上

网站标题title

网页标题

在 HTML/XHTML 文档中是必须的

链接外部样式表,参见html学习(一)语法结构中css部分

style

定义内部样式表,参见html学习(一)语法结构中css部分

meta

<meta> 标签通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

例,指定作者,并3秒钟刷新一次

<meta name="author" content="cndaqiang" >
<meta http-equiv="refresh" content="3">

<meta charset="utf-8"> 声明UTF8编码 <meta charset="gbk"> 声明GBK 为默认编码。

<base>,<script>, <noscript>未掌握

body

浏览器展示给用户的部分

HTML标题<h1>...<h6>

标题随数字增大,逐渐变小

<h1>第一个标题</h1>
<h2>第二个标题</h2>

水平线<hr>


段落<p>

html忽略html代码中的回车,不会被“翻译”为换行 多个空格只会输出一个空格(毕竟是源代码,对空格进行忽略再正常不过)

无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

使用<p>…</p>确定一个段落 所以以后用markdown写文章注意

<p>一个段落</p>
		段落      1
		段落2
		<p>二个段落</p>

效果

一个段落

段落 1 段落2
二个段落

换行br

例,不换段落换行

<p>二个<br>段落</p>

文字格式化

字体格式

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

<b>粗体</b><em>着重</em><i>斜体</i><small>小号</small>
<strong>加重</strong><sub>下标</sub><sup>上标</sup>
<ins>插入</ins><del>删除</del>

计算机输出

标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

<code>code</code><br><kbd>kbd</kbd><br><samp>samp</samp><br>
<var>var</var><br><pre>pre</pre>

引用

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockqu> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
<abbr>abbr</abbr><br><address>address</address><br>
<bdo>bdo</bdo><br><blockqu>blockqu</blockqu><br><q>q</q><br>
<cite>cite</cite><br><dfn>dfn</dfn>

超链接<a>

<a href="url">链接文本</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接:href=”http://www.runoob.com/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=”http://www.runoob.com/html/”

图像img

简书编辑器发布时会自动把图片代码转换成md语法, 如图

表格table

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

标签 功能
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

	<table>
	<tr>
	<th>头1</th><th>头2</th>
	</tr>
	<tr>
	<td>单元1</td><td>单元2</td>
	</tr>
	</table>

效果

没有边框的表格

  • 可以没有表头th全是元素td,浏览器一般会把标头th翻译为加粗,如上图
  • 表格常用属性 来自http://www.w3school.com.cn/index.html
  • 根据属性,设置表格边框 <table border="1">
  • 表格内嵌套图片等当然没问题

列表

列表定义

如 有序列表

无序列表

有序列表

<ol>
<li>一行</li>
<li>二行</li>
</ol>

无序列表ul

语法

<ul>
<li>一行</li>
<li>二行</li>
</ul>

自定义列表

就是没有开头的圆点和编号 dt比dd要缩进,如

<dl>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
</dl>

效果如图

列表项内部可以嵌套段落、换行符、图片、链接以及其他列表等等。

区块

大多数 HTML 元素被定义为块级元素或内联元素

内联元素在显示时通常不会以新行开始。 实例: <b>, <td>, <a>, <img>

块级元素在浏览器显示时,通常会以新行来开始(和结束)。 实例: <h1>, <p>, <ul>, <table>,<div>

div

<div> 元素没有特定的含义,它属于块级元素,浏览器会在其前后显示折行。 与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性 ** <div> 元素的另一个常见的用途是文档布局**。它取代了使用表格定义布局的方法。

<div>

<div>
	<h1>标题</h1>
</div>

<div style="float:left">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

<div style="float:right">
	<p>内容</p>
	<p>内容</p>
</div>

</div>

效果

当然使用table也能实现相同效果,增加css定义,可以使网页布局更顺眼

学到这,就可以看好看网页的css和布局了

框架

就是在网页上显示另一个html文档,注意仅是html文档,如果url指向的是php或者其他类型不可以 语法

<iframe src="http://127.0.0.1/html/" ></iframe>

设置显示大小

<iframe src="目录" width="200" height="200"></iframe>

去除边框

<iframe src="目录" frameborder="0"></iframe>

标签嵌套实例

图片超链接

<a href="http://www.jianshu.com/"><img src="http://upload-images.jianshu.io/upload_images/4575564-a6dd1dfc508d8f09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/></a>

属性

属性="属性值"*

href超链接

<a href="url">链接文本</a>

id标记

例 点击超链接回到一个段落则跳转到id为one的部分

<p id="one">一个段落</p>
省略
<a href="#one">回到一个段落</a>

跳转到另一url内的id

<a href="http://test.com/index.html#tips">

style

定义元素内样式表,用于css, 例html学习(一)语法结构中css部分

更改字体的大小,颜色,等等各种标签的不同属性

以下未掌握

title

描述了元素的额外信息 (作为工具条使用)

target

class

为html元素定义一个或多个类名(classname)(类名从样式文件引入)

应用

网插入页pdf

<iframe src="My.pdf" style="width:900px; height:700px;" frameborder="0"></iframe> 

网页内引入另一个网页

<body>
    <div id="tab_1">
        <iframe src="http://cndaqiang.gitee.io/archive/index.html"
        width="100%" height="100%"
        ></iframe>
    <!--代码参考自: [CSDN @Uncle_Gen](https://blog.csdn.net/mildddd/article/details/79800950) -->
    </div>
</body>

本文首发于我的博客@cndaqiang.
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!



评论


广告

目录

广告
访客数据