最基础的HTML知识点
来源:互联网 发布:淘宝 延长收货 几天 编辑:程序博客网 时间:2024/06/05 08:22
HTML简介
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
HTML文档的后缀名
.html
.htm
HTML 网页结构
只有 <body>
区域 (白色部分) 才会在浏览器中显示。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag):<标签>内容</标签>
· HTML 标签是由尖括号包围的关键词,比如 <html>
· HTML 标签通常是成对出现的,比如 <b>
和 </b>
· 标签对中的第一个标签是开始标签,第二个标签是结束标签
· 开始和结束标签也被称为开放标签和闭合标签
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素: <p>这是一个段落。</p>
HTML 实例
<!DOCTYPE html> <html><head><meta charset="utf-8"> <!-- 大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。 --><title>菜鸟教程(runoob.com)</title></head><body><h1>hello world1</h1></body></html>
实例解析
· <!DOCTYPE html>
声明为 HTML5 文档
· <html>
元素是 HTML 页面的根元素
· <head>
元素包含了文档的元(meta)数据
· <title>
元素描述了文档的标题
· <body>
元素包含了可见的页面内容
· <h1>
元素定义一个大标题
HTML 基础
HTML 元素
HTML 标题(Heading)是通过<h1>
- <h6>
标签来定义的,并且字体大小依次递减,权重也依次递减。
<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>
HTML 段落是通过标签 <p>
来定义的.
<p>这是一个段落。</p><p>这是另外一个段落。</p>
HTML 链接是通过标签 <a>
来定义的.
<a href="http://www.baidu.com">这是一个百度链接</a>
HTML 图像是通过标签 来定义的.
<img src="/images/logo.png" width="258" height="39" />
· HTML 元素可以设置属性
· 属性可以在元素中添加附加信息
· 属性一般描述于开始标签
· 属性总是以名称/值对的形式出现,比如:name=”value”。
HTML 属性
· HTML 元素可以设置属性
· 属性可以在元素中添加附加信息
· 属性一般描述于开始标签
· 属性总是以名称/值对的形式出现,比如:name=”value”。
HTML <head>
元素
<head>
元素包含了所有的头部标签元素。在 <head>
元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>
, <style>
, <meta>
, <link>
, <script>
, <noscript>
, and <base>
.
HTML 表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th>
标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<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>
标签
<ul><li>Coffee</li><li>Milk</li></ul>
浏览器显示如下:
- Coffee
- Milk
HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol>
标签。每个列表项始于 <li>
标签。
列表项项使用数字来标记。
<ol><li>Coffee</li><li>Milk</li></ol>
浏览器中显示如下:
- Coffee
- Milk
HTML 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl>
标签开始。每个自定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd>
开始。
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
浏览器显示如下:
- Coffee
- - black hot drink
- Milk
- - white cold drink
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
表单使用表单标签 <form>
来设置:
<form> . input 元素 . </form>
输入元素
多数情况下被用到的表单标签是输入标签(<input>
)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域(Text Fields)
文本域通过<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>
单选按钮(Radio Buttons)
<input type="radio">
标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female</form>
复选框(Checkboxes)
<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>
提交按钮(Submit Button)
<input type="submit">
定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"></form>
HTML 字符实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>
, <p>
, <ul>
, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>
, <td>
, <a>
, <img>
HTML <div>
元素
HTML <div>
元素是块级元素,它可用于组合其他 HTML 元素的容器。
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body>
<h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
内部样式表
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style></head>
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>
- 最基础的HTML知识点
- 基础的html知识点
- HTML最基础的形式
- React native最基础的入门知识点
- web最基础知识点
- H5最基础知识点
- html基础知识点(1)
- html基础知识点(2)
- HTML基础知识点轨迹
- HTML基础知识点总结
- HTML基础知识点
- HTML 你最该知道的几个知识点
- html 最基础实用的表单标签
- html最基础
- HTML和css基础知识点
- 前端(HTML)知识点1:HTML基础
- HTML标记的知识点
- HTML的知识点
- 关于vim复制粘贴命令总结
- C++中检查浮点数值有效性
- 蓝桥杯练习题之回文数
- 一些Unity 小提示
- Liunx Zookeeper集群安装
- 最基础的HTML知识点
- Okabe and Banana Trees 思路题
- MySQL使用存储实现快速创建多分表
- Collections.sort()方法的使用及Comparable和comparator的qubie
- 开发环境搭建-Spring Tool Suite安装
- 正交向量和子空间学习
- ROS包全攻略:消息vs服务;可执行vs插件
- 自己来写RPC框架—第一章
- 四、Android安全机制之数据加密