HTML入门

xml:从数据角度来说,是数据的存储和传递方式

xml文件规则:
1.xml语言没有固定标签和属性,都是自定义的(要说明)

将HTML的语法用xml的严格标准去写,这样的文档被称为“xhtml”文档

 xhtml:
 1.将单标签使用"/"结束:即<hr>→<hr/>
 2.将无值的属性改写为有值:让其值等于其属下名就可以:即   noshade="noshade"
 3.标签都使用小写,属性都加引号(单双引号都可以)标签别错位书写

网页的文档类型

一个html文件的第一行代码通常就是用来声明网页文档类型,格式如下:

<!doctype 声明语句>

文档类型(DTD):不同的HTML的版本

链接标签

<a href="设定链接的目标网页文件 url" target="设定要打开该网页的浏览窗口的名字" >内容部分</a>

其中url就是“网页网址的意思”。

浏览器窗口通常是有名字的。

  内部固定名字和含义的窗口:
  _blank:新的窗口(空白窗口)
  _self: 当前网页本身的窗口
  _parent: 当前窗口的“上一级”窗口
  _top:当前窗口所在的窗口层级中最顶层的窗口
在新窗口打开
 url 值“链接地址”,通常可以分一下情形:
 1.绝对地址:通过该设定的地址就可以直接找到所需的网页地址。
   ①本地绝对地址,形式类似:file:///D:/abc/def/hij.html
   ②互联网绝对地址,形式类似:http://www.abc.com/def/hij.html
 2.相对地址:需要通过所设定的地址加上当前网页本身的地址结合才能找到需要的网页文件
  相对地址是指相对于当前网页的本身的地址来找出正确的地址
   ①   ./    ——代表本身的地址(当前地址),及当前网页地址,通常可以省略
   ②  ../      ——代表当前网页地址的“上一层”地址(路径)
   ③   /      ——代表当前网页的最顶层路径,这在web应用中才有效。

链接的变种形式:锚点

 锚点其实是指一个网页中的某个位置。
 锚点的作用:让用户在一个比较长的网页中可以快速定位其所需要的内容(位置)。
 锚点的实现:由两个a标签配合使用:
           设定锚点链接:<a href="#锚点名">内容部分</a>
           设定锚点的名字(锚的位置):<a name="锚点名"></a>

锚点的应用——返回顶部

回到顶部

链接的其他应用:

发送邮件:
<a href=”mailto:12500791@qq.com”>无聊的时候给我   Email</a>
 文件下载:
<a href=”文件的路径url”>点我下载</a>

其他相关标签:

link:用于引入其他文件,主要是css文件。
base:用于设定当前网页中的所有a链接的目标打开窗口:<base tareget=”_blank” /> 

这两个标签都在head标签中使用。
图片标签
 <img src="图片文件路径 url"  alt=”设定图片的描述” 
  width=”100”  height=”50” border=”1”  align=”left || center  || right” />
  alt属性:主要给搜索引擎使用使索搜引擎可以“识别”该图的具体内容。
  border:用于设定图片的边框线的“粗细”,单位还是px。
  align:用于设定图片的定位方式:靠左,剧中,靠右

图像映射:指在一张图片上,产生多个不同的链接

  图像映射技术需要使用一张图片,以及一个可以对该图片进行“区域划分”的map标签实现,划分出的每个“小”区域可以单独设定
 链接。 设定的小区块可以有3种形状:
  矩形:
             <areashape="rect" coords="矩形的左上角坐标和右下角坐标" href="01图片标记.html" >
  圆形:
              <area shape="circle" coords="圆心的坐标和半径" href="01图片标记.html">
  多边形:
              <area shape="poly"coords="连续的点的坐标"href="01图片标记.html" >
 ps:在计算机中,通常坐标都是以“左上角”为原点,向右为x正方向,向下为y正方向。
图片映射技术
表格:将一定范围的区域划分为“行列对齐”的若干个“格子”的一种技术。

表格的三个标签:

 <table>
<tr>
    <td>这个td中才是放置具体“内容部分”的区域</td>
</tr>
 </table>

 table:用于“声明”一个表格
 tr:用于设定一个表格中的“一行”,多行就使用多个tr配   对。
 td:用于设定一个行中的“一列”(单元格),多个列就使用多个td。
 th:用于设定一个“标题单元格”。只要可以用td,就可以用td。
 一个表格可以有多行,一个行可以有多列。

表格中的单元格可以进行“合并”操作,是通过td上的两个属性来实现。

 table常用属性:
width:
height:
border:设定表格的边框线,其实会应用整个表格的  所有“边框线”(每个单元格)
cellpadding: 设定单元格中的内容与单元格的边框线之间的“间距”,单位是px
cellspacing: 设定相邻的两个元格的边框线之间的“间距”,单位是px
bgcolor=”yellow”  设定表格的总体上的背景颜色
background=”图片地址url”: 设定表格的总体上的背景图
    caption:设定标题文字
align=”left // center // right”: 设定表格总体上的定位方式。
bordercolor:设定边框线的颜色
td常用属性:
width:
heigh
bgcolor=”yellow”  设定单元格的背景颜色
background=”图片地址url”: 设定单元格的背景图
align=”left // center // right”: 设定单元格中的内容的水平对齐方式
valign=”top // middle // bottom”: 设定单元格中的内容的垂直对齐方式
colspan=”5”:  表示该单元格会水平向右边合并5个“原始单元格”,其本身相当于“跨”5个列。
rowspan=”3”:  表示该单元格会垂直向下边合并3个“原始单元格”,其本身相当于“跨”3个行。

表格区域划分
thead:代表表格的“头部”区域
tbody:代表表格的“中部”区域(主体区域)
tfoot:代表表格的“尾部”区域,同样可以放tr。

表格案例
显示效果
常用字符实体

字符实体其实就是用某种特殊的符号来代表某种具有特定含义的字符。

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

推荐阅读更多精彩内容

  • 一. HTML、XML、XHTML 有什么区别 1. 三者基本特征 HTML,超文本标记语言(Hyper Text...
    远山黛子阅读 307评论 0 2
  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 10,991评论 46 548
  • 查看作者原文 一、前端开发做什么 传统前端:html+css+js HTML5大前端:各种端的兼容开发、Ajax+...
    秋风喵阅读 599评论 0 2
  • 1.HTML、XML、XHTML HTML 超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可...
    姚小帅阅读 334评论 0 1
  • 20出头的仙女们,最大的焦虑不是脱单、脱贫,而是脱发。 别人羡慕我们有大把好时光可以浪费,可他们没看到...
    盒饭颖阅读 191评论 0 0