美文网首页
HTML及常用标记

HTML及常用标记

作者: 月影追猎者 | 来源:发表于2019-03-08 20:48 被阅读0次

超文本标记语言(HyperText Markup Language,HTML)是一种用于创建网页的标准标记语言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为HTML5文档
<html> 元素是HTML页面的根元素
<head> 元素包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML基础
HTML标题(Heading)通过<h1> - <h6>标签定义
HTML段落通过<p>标签定义
HTML链接通过<a>标签定义
HTML图像通过<img>标签定义

HTML属性
属性是HTML元素提供的附加信息
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,如:name="value"
属性值始终在引号内

HTML文本格式化
HTML使用标签<b>("bold")与<i>("italic")对输出文本进行格式化,如:粗体 or 斜体

HTML超链接
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,点击这些内容可以跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a>中使用了href属性来描述链接的地址。
默认情况下:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。

HTML图像
在HTML中,图像由<img>标签定义。

<img src="url" alt="some_text">

src属性的值是图像的URL地址,即存储图像的位置。
alt属性用来为图像定义一串预备的可替换的文本。

HTML表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML列表
无序列表

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

有序列表

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

定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签<form>设置。
多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性(type)定义的。

文本域通过<input type="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

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

密码字段通过标签<input type="password">定义。

<form>
Password: <input type="password" name="pwd">
</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="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<input type="submit">定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="action.jsp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML列表框
<select>标记定义下拉列表
下拉列表

<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

单选多行列表

<select size="2">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

多选多行列表

<select size="3" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

HTML布局
<div>定义文档区块,块级(block-level)
<span>组合文档中的行内元素

相关文章

  • HTML及常用标记

    超文本标记语言(HyperText Markup Language,HTML)是一种用于创建网页的标准标记语言。 ...

  • HTML常用标签及属性

    什么是HTML HTML基本语法 常用标签及属性 链接 文本标记 表格 列表 表单 结构标记 什么是HTML HT...

  • HTML常用标签及属性

    什么是HTML HTML基本语法 常用标签及属性 链接 文本标记 表格 列表 表单 结构标记 本文知识来源MDN(...

  • 语法及常用标记(html)

    1.常规标记/双标记 <标记 属性="属性值" 属性="属性值"> 2. 空标记/单标记 <标记 属性=...

  • html基础

    链接:JSP网站开发之HTML入门知识及常用标记符 (一) 网站开发之HTML基础知识及超链接(二) 1.BODY...

  • HTML常用标签总结

    HTML 常用的标签 在讲HTML常用标签之前,我们先认识下HTML。 HTML,超文本标记语言(英语:Hyper...

  • HTML常用标签总结

    HTML常用的标签 在讲HTML常用标签之前,我们先认识下HTML。 HTML,超文本标记语言(英语:HyperT...

  • HMTL常用标签

    第一章HTML的常用标签 html超文本标记语言,是一门标记语言1.HTML标记标签通常被称为HTML标签(HTM...

  • 2020.2.28 HTML

    HTML:世界通用的超文本标记语言。标记语言是一套标记标签。HTML文档包括了HTML标签及文本内容。HTML文档...

  • HTML 常用属性标记

    1、DOCTYPE 文档类型声明 声明必须放在HTML文档第一行 声...

网友评论

      本文标题:HTML及常用标记

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