HTML常用标签

看客老爷们大家好!为了让小白(零基础)能快速的了解H5,为了让小白能有一个从零开始的,可以看懂的,看了后能学到一些知识点的文档,今天开始我将持续性的写一些小知识点的文章;下面我们就从页面结构开始:

网页的构成

网页是由结构(页面的结构部分html)、表现(网页的样式css)、行为(网页要实现的交互功能js)组成的;简单的说html是我们造的一个机器人;css就是给他穿上衣服;js就是赋予它走路,下棋等的行为;

好的,今天我们就说说HTML的部分:

深入HTML

HTML 指的是超文本标记语言 (英文全称:Hyper Text Markup Language) www万维网的描述性语言。

HTML中可以写入标签(标记)下面我们说说常见标签的语法:

HTML标记的语法
1、常规标记(双标记):
<标记名称 属性1名="属性1值" 属性2名="属性2值" ………… ></标记名>
2、空标记(单标记):<标记名 属性1名="属性1值" />
注:标记有两种形式,我们分别称单标记和双标记,或者叫空标记和普通标记;

HTML常用标签

1、文本标题
语法:<h#></h#>
说明:
其中#可以选择1-6;
文本标题(h1-h6)
<h1>一级标题</h1>(唯一性,在单一页面中只能出现一次)
<h2>二级标题</h2>
...
<h6>六级标题</h6>

2、字体及字符实体
语法:<i></i> | <em></em>
说明:倾斜标记

语法:<b></b> | <strong></strong>
说明:加粗标记

语法:<u></u>
说明:下划线标记

语法:<br />
说明:空标记,用来设置字体换行

语法:<hr />
说明:空标记,用做水平线

语法:<p></p>
说明:段落标记,标识一个段落(段落与段落之间有段间距)

什么是字符实体

在往HTML文档中写入特殊字符,
如“〈”、“〉”、“&”、“ ”等要使用特殊的代码,
浏览器会用HTML命令对这些特殊代码进行翻译。
往网页中输入特殊字符,需在HTML代码中加入以&开头的字母组合或以&#开头的数字。

常见的有:
  不换行空格

> 右尖括号

< 左尖括号

© 备案中图标

3、常用元素

语法:<div></div>
说明:<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

语法: <p></p>
说明:<p></p>文本结点是一个段落标签;

语法: <span></span>
说明:<span></span>文本结点可以是某一小段文本,或是某一个字
4、列表的应用

HTML中有三种列表,分别是:
无序列表(ul)
语法:

<ul>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    …………
</ul>

有序列表(ol)

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    …………
</ol>

自定义列表(dl)

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
    ………
</dl>

5、超链接和图像

超链接
语法:
<a href="目标文件路径及全称/连接地址" alt="替换文本" title="提示文本">链接文本/图片</a>

插入图像

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

6、表格元素

(1)表格的语法
语法:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

说明:
一对tr表示一行;一对td表示一列(一个单元格)

(2)表格的相关属性

width="表格的宽度"
height="表格的高度"
border="表格的边框"
bordercolor="边框色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的空隙"
align="表格对齐方式" 取值:left\right\center
valign="垂直对齐" 取值:top\bottom\middle
colspan=“所要合并的单元格的列数"
rowspan=“所要合并单元格的行数”

7、表单元素

(1)表单域
语法:

<form name="表单名称" method="post/get"  action=""></form>

说明:
Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据。出于安全性考虑,建议最好使用 Post 提交数据

(2)表单控件

文本框:<input type="text" value="默认值" />
密码框:<input type="password" />
提交按钮:<input type="submit" value="按钮内容" />
重置按钮:<input type="reset" value="按钮内容" />
单选框:<input type="radio" name="" />
复选框:<input type="checkbox" name="" />
disabled="disabled" :禁用
checked="checked" :默认选中
按钮:<input type="button" value="按钮内容" />

(3)下拉菜单
语法:

<select>
     <option>下拉选项1</option>
     <option>下拉选项2</option>
      …………
</select>

(4)多行文本框

语法:<textarea cols="" rows="" ></textarea>

说明:rows属性和cols属性用来设置文本输入窗口的高度和宽度,单位是字符。

今天的常用标签就介绍到这里;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • (一)常用标签 divspanulolaimgformbuttoninputtableh1, h2, h3pree...
    07120665a058阅读 524评论 3 4
  • 学习目标: 了解html的基本结构 掌握标题标签: 掌握段落标签: 掌握通用块标签: 掌握图片标签: 掌握超链接标...
    husky_1阅读 2,515评论 0 12
  • 前言:HTML是用来描述网页的一种语言 是一种超文本标记语言 1.行标题 格式: 行标题 注:标题(Heading...
    LBQ_DS阅读 482评论 0 0
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 人有三样东西是无法隐瞒的,咳嗽、穷困和爱;你想隐瞒却欲盖弥彰” 当一段感情难以为继,多半是不爱了,但凡有坚持下去的...
    蔷薇灵灵栖阅读 543评论 0 2