zoukankan      html  css  js  c++  java
  • 第一章 HTML基本标签

    1.HTML:
    HTML:超文本标签语言(标签又称标记、元素)。
    浏览器:“解释和执行”HTML源码的工具 (运行网页的工具APP)。
    客户端:享受服务的计算机
    服务器:提供服务的计算机

    2、基本框架(网页最小结构)

    <html>
    <head>
    <title>网页标题</title>
    </head>
    <body>
    网页内容:这是网页的最小结构
    </body>
    </html>
    

    3、<head> 头部

    (1)<title>网页标题:网页摘要信息利于浏览器解析和搜索引擎搜索
    (2)<meta />   数据元 文档的信息描述
    [1]描述文档类型和字符编码
    [2]描述搜索:关键字和描述

    注:charset编码方式——w3c web网页语言 统一规范 网页 全世界 utf-8、只想服务 于国内 例如 eg:中文 编码 该gbk gb2312

    例如:

    <head> 
    <title>淘宝网</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name= "keywords" content= "淘宝,网上购物,交易市场" /> 
    <meta name= "description" content= "淘宝网,提供各类服饰、美容、家居、数码、……" />
    </head>
    

    4、<body>身体,网页内容(可以是文本、图像等 )

    5、HTML标签分类
    块级标签:显示为“块”状,前后隔一行 ,一块里可以包含多行【独占一行、能够控制的内、外边距 、宽度浏览器始终是一样大的、display:block 默认block】

    行级标签:按行逐一显示 ,一行中可以包含图文内容。【默认不换行文本内容都在同一行上面、高,行高及外边距和内边距部分可改变、display:inline; 默认是行内元素inline】
    分类好处:方便布局设计

    6、块级标签
    (1)基本块级标签
    <h1>—<h6>:标题标签,<h1>最大,<h6>最小 —— h1只能在页面出现一次, 出现多次不利于我们的页面排名,多的认为作弊,不利于搜索引擎搜索
    <p>:定义段落
    <hr />:定义水平线

    (2)用于布局的块级标签
    [1]有序列表:默认为阿拉伯数字
    <ol>
    <li>列表项</li>
    </ol>
    [2]无序列表:默认为小圆点
    <ul>
    <li>列表项</li>
    </ul>
    [3]描述标签
    <dl>
    <dt>描述标题</dt>
    <dd>描述内容</dd>
    </dl>
    [4]表格标签:<table>表格行<tr>表格列(单元格)<td>
    <table>
    <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
    </tr>
    </table>

    [5]表单标签:<form>
    <form method="post|get" action="url地址">
    表单内容
    </form>

    [6]块标签:<div>作为容器来使用

    7、行级标签
    图片标签:<img src="图片路径" alt="图片不显示的提示文字" title="鼠标悬浮提示文字" align="对齐方式" />—— alt  提供给搜索引擎抓取,align图后文字对其方式-值可为居图中absmiddle,right,left,宽高-width/height

    范围标签:<span> </span>

    换行标签:<br />   不建议使用

    字体标签:<font> 作用改变文字字体内容 不建议使用 【size = "文字大小" color ="文字颜色"】。如果只是为了修饰文本 就可以使用

    (1)strong b 标记的区别

    strong 文字显示粗体状态 强调 文章中的某一些重要词 SEO收录有一定影响 对我们站点排在百度首页有一定影响
    b 文字显示粗体状态 没有什么大的作用只是修饰页面字体而已

    (2)em i 标记的区别

    em 斜体 强调(相对strong来说弱一点) SEO页面有一定作用

    i 斜体 没有强调 用在项目里面比较多

    预格式化文本标签 ——<pre>、<meta>、<mark>、<small>

    <pre> 作用:保持文本原有的格式

    文本移动标记:<marquee >         由于没有语义、代码多,现在已经被w3c抛弃 
    a1. direction滚动方向  默认向左"left"    right右 down下 up上 

    a2.文本背景 bgcolor="red"

    a3.behavior滚动方式  scroll  默认向左一直滚动,slide,单向一次停止,来回走alernate

    a4.loop 循环次数    loop="自定义次数" 如果true 无限循环

    a5.scrollAmount="速度值" 文本速度值

    a6.鼠标移入停止  onmouseover=this(指的是marquee当前标记).stop() 停止,鼠标移入marquee让它自己停止动画

    a7.鼠标移出执行动画 动起来 onmouseout=this.start() 开始动

    8、XHTML的基本规范
    (1)标签名和属性名称必须小写
    (2)HTML标签必须关闭
    (3) 标签必须正确嵌套
    (4)必须添加文档类型声明 【!DOCTYPE】
    (5)属性值必须用引号括起来

    9、实际开发的4种块状结构
    (1)div-ul(ol)-li :常用于分类导航或菜单等
    (2)div-dl-dt-dd :常用于图文混编的场合
    (3)table-tr-td :常用于图文布局或显示数据
    (4)form-table-tr-td:常用于布局表单

  • 相关阅读:
    C++开源库,欢迎补充。
    LeetCode第二题
    LeetCode第五十八题
    tomcat连接数据库oracle问题,ClassNotFoundException异常
    jsp验证码,解决无法更新验证码问题
    [面试真题] LeetCode:Symmetric Tree
    [面试真题] LeetCode:Flatten Binary Tree to Linked List
    [面试真题] LeetCode:Longest Common Prefix
    [面试真题] LeetCode:Reverse Linked List II
    [面试真题] LeetCode:Merge Two Sorted Lists
  • 原文地址:https://www.cnblogs.com/suola/p/8275726.html
Copyright © 2011-2022 走看看