美文网首页
HTML学习

HTML学习

作者: 小传奇_2681 | 来源:发表于2019-02-16 10:58 被阅读0次

    简介

    什么是HTML?

    • HTML:超文本标记语言 (Hyper Text Markup Language)
    • HTML是一种标记语言(markup language),标记语言是一套标记标签(markup tag)组成的
    • HTML使用标记标签来描述网页

    HTML标签

    • 尖括号包围关键词,如<html>
    • 标签成对出现,如<b>和</b>
    • 第一个和第二个对应开始标签(开放标签)和结束标签(闭合标签)

    HTML文档=网页

    HTML文档包含HTML标签纯文本
    例子:

    <html>
    <body>
    
    <h1>my first heading</h1>
    
    <p>my first phatograph</p>
    
    </body>
    </html>
    

    编辑

    右击新建文本文档(记事本)
    编辑代码 - 另存为 xxxx.html - 打开这个
    会出现类似效果

    image

    链接

    < a href="链接“>描述</ a>

    • 链接用<a>标签进行定义
    • 注意:href="http://链接"
    • 在 href 属性中指定链接的地址

    元素

    • 元素的内容是开始标签与结束标签之间的内容
    • 大多数HTML元素是嵌套结构
    • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
      在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
    • 建议使用小写标签(相较于<P>使用<p>)

    HTML属性

    • 属性为HTML元素提供附加信息
    • 属性总是以名称/值对的形式出现,比如:name="value"
    • 属性总是在HTML元素的开始标签中规定的
    • 始终为属性值加引号

    HTML标题

    标题级别
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    直到<h6>六级标题</h6>

    tip:仅仅使用在标题中,粗体文本可使用其他标签或CSS

    标题居中
    <h1 style="text-align:center">标题内容</h1>

    HTML水平线


    标签在HTML页面中创建水平线,用于分割内容。
    如:
    <p>A paragraph</p>
    <hr/>
    <p>this is a paragraph</p>
    <hr/>
    <p>as the same</p>
    

    代码注释
    `` 注释内容不会显示
    查看源代码
    右击——查看源文件/查看页面源代码

    段落

    <p>段落文本</p>

    段落元素由 p 标签定义

    空行:插入<br/>标签
    拆行

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

    Tips:不要在源代码中连续空格/空行

    格式化

    文本格式化

    粗体:<b>this text is bold</b>
    斜体:<em>this text is emphasized</em>
    <i>this text is italic</i>

    表单<form>

    输入框 input type="text"

    <form>
    First name:<br/>
    <input type="text" name="firstname">
    <br/>
    </form>
    

    单选按钮 <input type="radio">

    <form>
    <input type="radio" name="sex" value="male">Male
    <br/>
    <input type="radio" name="sex" value="female">Female
    </form>
    

    多选按钮<input type="checkbox">

    <form>
    <input type="checkbox" name="xxxx" value="xxxx">走中国特色社会主义道路
    <br/>
    <input type="checkbox" name="xxxx" value="xxxx">我爱我家
    <br/><br/>
    </form>
    

    按钮 <button>

    <button type="button">Submit</button>
    

    大输入框

    <textarea>

    列表

    无序列表<ul>

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    

    显示为:

    • Coffee
    • Milk

    有序列表<ol>

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    

    显示为:

    1. Coffee
    2. Milk

    相关文章

      网友评论

          本文标题:HTML学习

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