必须掌握的web基础知识（html详细介绍）

最新推荐文章于 2022-11-02 00:08:00 发布

Ysiqiqi

最新推荐文章于 2022-11-02 00:08:00 发布

阅读量340

点赞数 1

分类专栏：初级经验分享

本文链接：https://blog.csdn.net/Ysiqiqi/article/details/84261364

版权

初级经验分享专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.HTML

1.页面基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>
<body>

<!-- 填写相关的页面元素 -->

<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

2.块级元素及行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我是块级元素</div>
<p>我是块级元素</p>
<a>我的行内元素</a>
<span>我的行内元素</span>
<span>我的行内元素</span>
</body>
</html>

展示的效果如下：

3.标题文字标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是块级元素h1</h1>
<h2>我是块级元素h2</h2>
<h3>我是块级元素h3</h3>
<h4>我是块级元素h4</h4>
<h5>我是块级元素h5</h5>
<h6>我是块级元素h6</h6>
</body>
</html>

展示的效果如下：

4.文字标签

格式标签及应用	功能	应用效果
内容一<br />内容二	让文本强制换行	内容一内容二
<p>段落一</p><p>段落二</p>	段落标签	段落一段落二
<b>内容</b>	加粗标签	内容
<strong>内容<strong>	加粗标签	内容
<font color="#FF0000">设置字体红色</font>	设置字体颜色	设置字体红色
<font size="3">设置字体大小</font>	设置字体大小等	设置字体红色
<font face="黑体">设置字体黑体</font>	设置字体大小等	设置字体黑体
<s>内容</s>	删除线样式	内容
<em>内容</em>	强调标签，字体被加斜体效果	内容
<i>内容</i>	文字斜体格式	内容
欢迎访问<a href="http://www.divcss5.com/">DIVCSS5</a>	锚文本，超链接	欢迎访问https://blog.csdn.net/Ysiqiqi

5.按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="dianji()">确认</button>
</body>
</html>

属性

值

备注

disabled	disabled	规定应该禁用该按钮。
form	form_name	规定按钮属于一个或多个表单。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

方法：

属性	值	描述
onblur	脚本	当元素失去焦点时执行脚本
onclick	脚本	在元素区域内单击鼠标（不区分左右键）时执行脚本
ondblclick	脚本	在元素区域内双击鼠标（不区分左右键）时执行脚本
onfocus	脚本	当元素取得焦点时执行脚本
onmousedown	脚本	在元素区域内按下鼠标键（不区分左右键）时执行脚本
onmousemove	脚本	当鼠标指针在元素区域内移动时执行脚本
onmouseout	脚本	当鼠标指针移出元素区域时执行脚本
onmouseover	脚本	当鼠标指针移入元素区域时执行脚本
onmouseup	脚本	在元素区域内松开鼠标键（不区分左右键）时执行脚本
onkeydown	脚本	按下一个键时执行脚本
onkeypress	脚本	按下并松开一个键时执行脚本
onkeyup	脚本	松开一个键时执行脚本

6.文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text"  placeholder="Full name">
<input type="email" placeholder="Email">
</body>
</html>

autocomplete	on off	规定是否使用输入字段的自动完成功能。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
form	formname	规定输入字段所属的一个或多个表单。
maxlength	number	规定输入字段中的字符的最大长度。
name	field_name	定义 input 元素的名称。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder	text	规定帮助用户填写输入字段的提示。
readonly	readonly	规定输入字段为只读。
required	required	指示输入字段的值是必需的
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。
value	value	规定 input 元素的值。

7.表格（表头）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
<!--表头-->
  <thead>
    <tr>
      <th style="width: 210px;">Skin Class</th>
      <th>Preview</th>
    </tr>
  </thead>
<!--表数据-->
  <tbody>
    <tr>
      <td><code>skin-blue</code></td>
      <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
    </tr>
    <tr>
      <td><code>skin-blue-light</code></td>
      <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
    </tr>
 
  </tbody>
</table>
</body>
</html>

8.图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <img src="../../dist/img/user2-160x160.jpg" alt="User Image ">
</body>
</html>

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

9.下拉选择（三级联动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</body>
</html>

三级联动涉及的知识比较多：https://blog.csdn.net/Ysiqiqi/article/details/84311211可以查看该文档进行学习

10.单选及复选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--单选-->
	<input type="radio" name="radio" value="1" checked/>
	<input type="radio" name="radio" value="2"/>
<!--复选-->
     <input name='subject' type="checkbox" value="Math" />
     <input name='subject' type="checkbox" checked value="Math" />
     <input name='subject' type="checkbox" checked="checked" value="English"/>

</body>
</html>

11.textArea（富文本编辑器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea cols="80" rows="10"></textarea>
</body>
</html>

12.日期选择

￥￥￥浏览器自带日期选择￥￥￥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="meeting" type="date" value="2014-01-13"/>
</body>
</html>

Ysiqiqi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
必须掌握的web基础知识（html详细介绍）

一.HTML1.页面基本结构&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!-- Bootstrap 3.3.6 --&gt;
复制链接

扫一扫

专栏目录