首页 > 代码库 > 前端基础之html

前端基础之html

2024-10-29 18:28:39   204人阅读

html是什么

  • 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则

  • 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）

  • 静态网页文件扩展名：.html 或 .htm

  • HTML 不是一种编程语言，而是一种标记语言 (markup language)

    HTML 使用标记标签来描述网页

html结构

<!DOCTYPE html>  <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>网页标题</title> <meta name="keywords" content="关键字" /> <meta name="description" content="此网页描述" /> </head> <body> 网页正文内容</body> </html>
  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示。 
  • <body></body>之间的文本是可见的网页主体内容

html标签格式

技术分享

html常用标签

1  html标题

　　<h1> to <h6>

　　<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><h1>AAA</h1><h2>AAA</h2><h3>AAA</h3><h4>AAA</h4><h5>AAA</h5><h6>AAA</h6></body></html>
html标题

结果如下：

技术分享

 

2  html水平线 <hr/>

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><h1>AAA</h1><hr/></body></html>
html水平线

结果如下：

技术分享

3  html注释<!-- comment -->

注释并不会显示在网页上

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><h2>BBB</h2><!--<h1>AAA</h1>--><hr/></body></html>
html注释

结果如下：

技术分享

4  html段落<p>以及段落换行<br/>

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><p>hello world</p><p>hello        world</p></body></html>
段落标签

显示结果如下：

技术分享

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>hello world</p><p>hello     <br/>     world</p><hr/></body></html>
段落换行用

显示结果：

技术分享

5  html文本格式化

技术分享

6  html超链接<a>

<a>比较重要的属性有两个，分别是href、target

href指定超链接地址

target指定打开方式

　　_blank  新页面打开

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>hello world</p><a href=http://www.mamicode.com/"http://www.baidu.com">百度</a><hr/></body></html>
超链接

显示结果如下，点击 百度 跳转到 百度网页。

技术分享

7  html的图像<img>

使用格式：<img src="http://www.mamicode.com/url">

　　alt  定义当图片无法加载时，显示什么信息

　　width 定义宽度，单位可以为像素  也可以为百分比

　　height 定义高度

　　title: 鼠标悬浮时的提示信息.

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><p>hello world</p><a href=http://www.mamicode.com/"http://www.baidu.com"><img src=http://www.mamicode.com/"1.jpg",alt="logo",title="windows7 logo"/></a><hr/></body></html>
img

src:

技术分享

8  html的表格<table>

表格由<table>来定义，每行<tr> 有许多单元格<td>。表头可以使用<th>

<table>标签属性：

　　border  定义边框

在<table>中可以嵌入<th>  <tr>  <td>等标签

　　<tr>   定义行

　　<th>   定义表头

　　　　colspan  定义表头单元格可以横跨的列数。

　　　　rowspan  定义表头单元格横跨的行数

　　　　heardes  定义与表头单元格相关联的一个或者多个单元格。(html5新增)　　　

　　<td>   定义单元格

　　　　colspan  定义单元格可以横跨的列数。

　　　　rowspan  定义单元格横跨的行数

　　　　heardes  定义与单元格相关联的一个或者多个单元格。(html5新增)　　

　　　　

　　border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽）

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><table border="1px">    <tr>        <th colspan="2" >name</th>        <th rowspan="2">list</th>    </tr>    <tr>        <th headers="name">first name</th>        <th headers="name">last name</th>    </tr></table></body></html>
table表格

结果如下：

技术分享

另外，若某个单元格为空，浏览器可能无法显示出这个单元格的边框。为了防止这种情况，可以在该单元格加一个空格占位符&nbsp。

9  html列表<ul> <ol>

列表分为

　　无序列表<ul>

　　有序列表<ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><ul>    <li>male</li>    <li>female</li></ul><hr/><ol>    <li>male</li>    <li>female</li></ol></body></html>
无序和有序列表

结果如下：

技术分享

10  html表单<form>

 

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

<form>中的属性：

　　action：后面加url  指定当提交表单时向何处发送表单数据

　　method：get/post两个值，get为明文  post为加密

　　name：指定表单的名称

　　target：_blanket  _self  _parent  _top 指定网页打开方式

　　<from>标签中较为常用的标签有<input>  <select>  <label>  <button>  

 

　　<fieldset> 标签可以将表单内的相关元素分组。 会在相关表单元素周围绘制边框。

　　　　name  规定fieldset的名称

　　　　form  值：form_id   规定fieldset所属的表单

　　　　

　　　　<legend>  定义了 <fieldset> 元素的标题。

<input>系列标签

<1> 表单类型
type:        text 文本输入框             password 密码输入框             radio 单选框             checkbox 多选框               submit 提交按钮                         button 按钮(需要配合js使用.) button和submit的区别？             file 提交文件：form表单需要加上属性enctype="multipart/form-data"                         上传文件注意两点：                     1 请求方式必须是post                     2 enctype="multipart/form-data"
 <2> 表单属性
 name:    表单提交项的键.           注意和id属性的区别：name属性是和服务器通信时使用的名称；           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：                type="button", "reset", "submit" - 定义按钮上的显示的文本                                 type="text", "password", "hidden" - 定义输入字段的初始值                                 type="checkbox", "radio", "image" - 定义与输入相关联的值checked:  radio 和 checkbox 默认被选中readonly: 只读. text 和 passworddisabled: 对所用input都好使.

select标签

<select> 下拉选标签属性          name:表单提交项的键.          size：选项个数          multiple：multiple                  <optgroup>为每一项加上分组                 <option> 下拉选中的每一项 属性：                       value:表单提交项的值.                          selected: selected下拉选默认被选中

 <textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">        <textarea cols=“宽度” rows=“高度” name=“名称”>                   默认内容        </textarea></form>

<label>标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form method="post" action="">        <label for=“username”>用户名</label>        <input type=“text” name=“username” id=“username” size=“20” /></form>

<fieldset>标签

<fieldset>    <legend>登录吧</legend>    <input type="text"></fieldset>

 

 

　

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Title</title></head><body><form name="aaa" action="/return/" method="get">    请选择语言:    <br/><br/><input type="radio" name="language" id="jtzw" value=http://www.mamicode.com/"chinese"/><label for="jtzw">简体中文</label><br/><br/>    <input type="radio" name="language" value=http://www.mamicode.com/"english" id="eng"/><label for="eng">English</label><br/><br/>    请选择熟悉的编程语言:<br/><br/>    <fieldset>        <legend>编程语言</legend>            <input type="checkbox" name="python" />python            <input type="checkbox" name="c" />c            <input type="checkbox" name="go" />go<br/><br/>    </fieldset><br/>    请选择地区：    <select name="district">        <optgroup label="China">            <option value=http://www.mamicode.com/"shandong">山东</option>            <option value=http://www.mamicode.com/"zhejiang" selected="selected">浙江</option>            <option value=http://www.mamicode.com/"guangdong">广东</option>        </optgroup>        <optgroup label="USA">            <option value=http://www.mamicode.com/"ny">纽约</option>            <option value=http://www.mamicode.com/"lsj">洛杉矶</option>        </optgroup>    </select><br/><br/>    请选择颜色:<input type="color"><br/><br/>    name:<input type="text" name="name" value=http://www.mamicode.com/" "/>    password:<input type="password" name="passwd" value=http://www.mamicode.com/"hahaha"/>    <input type="submit"  value=http://www.mamicode.com/"login"/><br/><br/>    系统：<input list="xuanze" type="text">    <datalist id="xuanze">        <option value=http://www.mamicode.com/"windows">Windows</option>        <option value=http://www.mamicode.com/"linux">Linux</option>    </datalist></form></body></html>
html表单

显示结果如下：

技术分享

 

 

 

 

 

 

　　

前端基础之html


联系
我们