美文网首页
HTML学习

HTML学习

作者: 不吃鱼的猫_8e95 | 来源:发表于2018-09-15 19:35 被阅读0次

    1.HTML 文档 = 网页

    Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

    <html>
    <meta charset="UTF-8">
    <body>
    
    <h1>我的第一个标题</h1>
    
    <p>我的第一个段落。</p>
    
    </body> 
    </html>
    
    • <html> 与 </html> 之间的文本描述网页
    • <body> 与 </body> 之间的文本是可见的页面内容
    • <h1> 与 </h1> 之间的文本被显示为标题
    • <p> 与 </p> 之间的文本被显示为段落
      如果编写html的时候中文出现乱码,加入<meta charset="UTF-8">即可

    2. HTML标签

    • <h1>~<h6>
      标题标签
    • <p>
      段落标签
    • <a>
      链接标签url
      <a href="http://www.sunmingming.top">This is a link</a>
    • <img>
      图片标签
      <img src="w3school.jpg" width="104" height="142" />
    • pre 标签对空行和空格进行控制。
      <pre>
      在pre标签之间的文字将会保留空格
      </pre>

    3. HTML元素

    • HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
    • 大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
    • HTML 文档由嵌套的 HTML 元素构成
      HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
    • < br>标签表示换行

    4. HTML 属性

    • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
    • 属性总是以名称/值对的形式出现,比如:name="value"。
    • 属性总是在 HTML 元素的开始标签中规定

    5. HTML水平线

    <hr /> 标签在 HTML 页面中创建水平线。

    6.HTML注释

    7.HTML拆行

    如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签

    <p>This is<br />a para<br />graph with line breaks</p>
    

    HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

    8.HTML样式

    • style 属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法
    • 背景颜色
      background-color 属性为元素定义了背景颜色
    <html>
    
    <body style="background-color:yellow">
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
    </body>
    
    </html>
    
    • HTML 样式实例 - 字体、颜色和尺寸
      font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
    <html>
    
    <body>
    <h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>
    
    
    </html>
    

    9. HTML 样式实例 - 文本对齐

    text-align 属性规定了元素中文本的水平对齐方式

    10.HTML链接

    **HTML链接分两种,一种是指向本网站的超链接。另一种是指向万维网的链接

    - 指向本站的<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
    - 指向万维网的<p><a href="http://www.baidu.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
    

    相关文章

      网友评论

          本文标题:HTML学习

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