美文网首页
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

相关文章

  • 前端学习路线

    前端学习相关网站 1 、关于HTML的学习 对于HTML的学习分为HTML和HTML5,HTML 指的是 HTML...

  • HTML学习:HTML基础

    一、HTML标题 HTML 标题(Heading)是通过 ~ 标签来定义的。 定义重要等级最高的标题。 定义...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • HTML (1)相关简介和VSCode

    更多学习HTML[https://www.runoob.com/html/html-tutorial.html],...

  • 04_HTML 属性

    前面我们学习了HTML的标签、元素。这次我们来学习HTML 属性。 HTML属性 HTML标签可以拥有属性。属性提...

  • HTML5—HTML学习

    HTML学习感想: 下面大致的记录了一写HTML的学习笔记 什么是HTML? HTML 是HyperText Ma...

  • html学习

    web标准构成: web标准不是某一个标准,而是由W3C和其他标准化组织敲定的一系列标准集合。主要包含结构(str...

网友评论

      本文标题:HTML学习

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