美文网首页
列表、图片、表格和链接

列表、图片、表格和链接

作者: hyt222 | 来源:发表于2017-06-28 13:40 被阅读0次

    1.列表

    <ul></ul> unordered list 不排序的列表,在每一项的前面不会列出数字,用小圆点代替。

    <li></li> list item 列表的每一项。

    <ol><ol> ordered list 有序列表。有一个属性 start=-1 , 可以让列表序号从 -1 开始。

    list 本身的特性造成列表项目前有 Table 的效果,在源文件中也做出这种效果,为了文件更加好读。

    无论是 unordered list 还是 ordered list ,他们可以嵌套。


    还有一种 <dl></dl> definition list 类似字典,词条与解释

    <dt></dt> 词条      <dd></dd>解释

    chrome浏览器效果

    2.图片

    <img /> 单个标记,没有结束标记。需要用属性 src 告诉它图片在哪里。

    属性 width 可指定,height 也可指定。width 和height 主要作用是为了让浏览器预先给你的图片留下位置。

    属性 alt = "01" 假如图片装载不过来或正在装载过程中,可以先给你看 alt 属性的文字。

    我们要理解一件事情:对于 HTML 来说,图片是一个字符。一定要从这个高度去理解图片在 HTML 里的位置。作为一个字符,意味着它和前后的字符其实是连在一起的,一个个从左往右排过来的。

    如果你觉得图片太大放在页面不合适,应该用图片编辑软件把图片缩小再放到页面中。

    如果想把某个网站的图片放到我们的页面中,右键点击网站图片“复制图片地址”,src 为复制的地址。src 可用的三种格式:jpg,gif,png。其它格式看浏览器。

    在 HTML 5 ,通过 CSS 决定图片和周围文字之间关系。


    <iframe src="http://news.163.com"></iframe>  在我们的页面开了个小窗口把另外网页的实时内容取过来。也占据一个字符位置,也有 width ,height 属性。

    chrome浏览器显示效果

    3.链接

    <a></a> 在中间放的文字(图片)是出现在我们页面上的链接。

    <a href="http://news.163.com">网易新闻</a> herf 属性为链接目的地。

    属性 target = _blank 打开一个新的窗口载入目的地链接。

    链接在浏览器的显示由CSS决定(无CSS则由浏览器默认样式决定)。鼠标放置链接处,浏览器左下角状态栏显示链接目的地址。


    如果 href 里的地址没有协议名称开头(http ftp mailto),浏览器会认为你想要的是你这个 html 页面所在的目录里有另外一个文件或目录。

    如果要链接到别的地方去一定要加上协议名称,才能找到相应的地方。如果没有协议名称打开当前目录下html页面。


    段落 <p> 有一种属性 id 。id = "here" 给这个段落起了名字 here 。<a href="#here"> 我们可以说目的地是一个段落,用这种方式可以在一个页面里再设定目的地。

    <a href="you.html#here"> 可转移到其他页面的 here。

    HTML 里绝大多数用来表达结构的标记都可以有 id 属性,标题 h1、h2 也可称为目的地。


    在图像上建立映射(地图)。

    4.表格

    chrome浏览器显示

    <table border="1"></table> 表格,border 属性画格子线。HTML 会根据表格数据做自动计算,自动调整表格。

    <caption></caption> 表格名称

    thead tbody tfoot 把表格分为三部分,表头、内容、脚注。

    <tr></tr> 表示一行    th 表头内容 td 格子内容

    td 的属性 clospan rowspan 列扩展 行扩展

    相关文章

      网友评论

          本文标题:列表、图片、表格和链接

          本文链接:https://www.haomeiwen.com/subject/tsiycxtx.html