`
giraffeql
  • 浏览: 17683 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html的一些简单笔记

阅读更多
	1.基本标签
	<html>
	  <head><title>标题</title>
	  </head>
	  <body>
	    <br/><!-- 换行 -->
		<hr/><!-- 水平分割符 -->
		&nbsp;空格&lt;小于&gt;大于
	  </body>
	</html>

	2.层级缩进
	<dl>
	  <dt>一级</dt>
	  <dd>二级</dd>
	  <dd>二级</dd>
	</dl>

	3.无序列表
	无序列表
	<ul>
	  <li>AAA</li>
	  <li>BBB</li>
	</ul>

	4.有序列表
	有序列表
	<ol>
	  <li>AAA</li>
	  <li>BBB</li>
	</ol>

	5.图像
	<img src="1.jpg" alt="图片说明"/>

	6.表格
	<!-- 
	table
	  |-tbody
	    |-tr
	      |-th
	      |-td 
	-->
	<table border="1px" cellpadding="6px" cellspacing="0px">
	<!-- border="1px"框线  cellpadding="6px"单元格内边距  cellspacing="0px"单元格空间距离 -->
	  <caption>表格标题</caption>
	  <tr>
	    <th colspan="2">AAAAAAA</th>
		<!-- colspan="2" 占两列 -->
	    <td>AAAAAAA</td>
	  </tr>
	  <tr>
	    <td>AAAAAAA</td>
	    <td>AAAAAAA</td>
	    <td>AAAAAAA</td>
	  </tr>
	</table>
	<table border="1px" cellpadding="6px" cellspacing="0px">
	  <tr>
	    <th rowspan="2">AAAAAAA</th>
		<!-- rowspan="2" 占两行 -->
	    <td>AAAAAAA</td>
	  </tr>
	  <tr>
	    <td>AAAAAAA</td>
	  </tr>
	</table>

	7.超链接
	<a href="" title="连接说明">XXX</a>
	<a href="#q1" title="连接说明">XXX</a>
	<!-- href="#q1"  加#表示当前页面定位的name -->
	<a name="q1">XXXX</a>
	<!-- name="q1"  提供定位标记-锚 -->

	8.框架标签(定义在head与body之间)
	<frameset rows="20%,*">
	  <frame src="1.html" name="top" noresize="noresize">
	  <frameset cols="30%,*">
		<frame src="2.html" name="left">
		<frame src="3.html" naem="rigth">
	  </frameset>
	</frameset>
	<!-- 2.html -->
	<a href="" target="right">XXXX</a>
	<!-- target="right"  定位到显示连接资源的位置name -->

	9.iframe标签
	<iframe strc="">画中画标签</iframe>

	10.form表单
	<form>
	  用户名:<input type="text" name="user"/><br/>
	  密码:<input type="password" name="psw"/><br/>
	  性别:<input type="radio" name="sex" value="nan" checked="checked">男<input type="checkbox" name="sex" value="nv">女<br/>
	  <!-- (name属性必须有,且同类的name值相同) -->
	  技术:<input type="checkbox" name="tech" value="java">JAVA
	  <input type="checkbox" name="tech" value="html">HTML
	  <input type="checkbox" name="tech" value="css">CSS<br/>
	  <input type="file" name="file"/><br/>
	  <input type="button" name="btn" value="按钮" onclick="alert(1);"/>
	  <input type="image" src=""/><!-- (具备submit功能) -->
	  <input type="hidden" name="mykey" value="myvalue"/><br/>
	  下拉框
	  <select name="country" size="4">
    	<option value="none">--选择国家--</option>
        <option value="usa">美国</option>
        <option value="cn" selected="selected">中国</option>
        <option value="en">英国</option>
      </select>
	  <textarea></textarea>
	  <input type="submit" value="提交"/>
	  <!-- (通过name属性做key、value属性做值封装数据,所以除输入框外,表单标签都应该定义这两个标签) -->
	  <input type="reset" value="重置"/>
	</form>

	11.区域框元素-fieldset
	<fieldset style="margin: 10px; padding: 8px"> // margin设置外边框,padding设置内边框
		<legend>区域说明</legend>
		<%-- 页面元素 --%>
	</fieldset>

	12. 选择文字时勾选选框
	使用<label for="目标id">XXX</label>,例:
	<input type="checkbox" id="otherOrder"><label for="otherOrder">其他选中订单同此时间导出</label></input>
分享到:
评论

相关推荐

    html笔记,重要笔记

    ### HTML基础知识详解 ...通过这些基础标签和属性的学习,我们可以构建出简单的网页结构,并对网页中的文本内容进行基本的格式化处理。随着进一步学习CSS和JavaScript,我们可以实现更复杂的网页设计和交互功能。

    HTML基础学习笔记

    HTML是 HyperText Markup Language 的缩写,是一种...以上就是HTML基础学习笔记中涵盖的一些关键知识点,包括HTML结构、样式控制、链接、图像和表格的使用,以及列表的创建。掌握这些基本概念和元素是制作网页的基础。

    韩顺平HTML课程笔记

    ### 韩顺平HTML课程笔记知识点概览 #### 第一章 HTML介绍 ##### 1.1 基本概念 - **HTML**: 超文本标记语言(HyperText Markup Language),是构建网页的主要语言之一。 - **描述性文本**: HTML文档由一系列HTML...

    html和css学习笔记

    ### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...

    HTML学习笔记.ppt

    例如,以下是一个简单的HTML实例: ```html &lt;html&gt; &lt;title&gt;Title of page This is my first homepage. &lt;b&gt;This text is bold &lt;/html&gt; ``` 在这个例子中,`&lt;b&gt;`标签用于加粗文本。保存这个文件为`.htm`或`....

    HTML完整教程笔记

    ### HTML完整教程笔记知识点 #### 一、HTML基础概念 - **HTML定义**:HTML(HyperText Markup Language)即超文本标记语言,是一种用于创建网页的标准标记语言。 - **HTML文件组成**:HTML文件不仅包括纯文本内容,...

    html教程课堂笔记(黑马程序员)

    HTML 教程课堂笔记总结 HTML 是一门网页制作语言,是第一门网页制作语言,最简单的一门语言。hyperText Markup Language 超文本标记语言。HTML 语言由标记组成。学习 HTML 语言,掌握一些常用的标记即可! 1. HTML...

    bootstrap学习笔记-html5

    5. **丰富的插件**:Bootstrap内置了一些JavaScript插件,如滚动spy、模态、下拉菜单等,它们基于jQuery库,使得添加交互效果变得简单。 通过这个“bootstrap学习笔记-html5”压缩包,初学者可以学习如何结合HTML5...

    云笔记,云笔记app排行榜,HTML

    例如,描述中的“微信小程序代码简单模板”,就是为新手提供的一种快速入门的学习资源,帮助他们快速掌握云笔记小程序的开发技巧。 在提供的压缩包文件中,我们看到一系列图片和资源文件,可能包含了云笔记小程序的...

    html与js笔记

    在案例一中,我们看到了一个简单的HTML文档,其中包含了元数据(如关键词和描述)以及内容类型声明。此外,还展示了如何通过`&lt;link&gt;`标签引入外部CSS文件,以应用样式规则。当不使用外部引用时,可以直接在`&lt;style&gt;`...

    html5 css3 简单基础知识笔记

    html5 css3 简单基础知识笔记

    个人做的HTML5学习笔记

    ### HTML5学习笔记知识点梳理 #### 一、HTML5简介及特点 - **定义**: HTML5是HTML(HyperText Markup Language)的最新版本,由万维网联盟(W3C)于2014年10月正式发布。它不仅继承了HTML的基本特性,还新增了许多...

    新手html学习笔记(仅供菜鸟成长参考).rar

    本资源“新手html学习笔记(仅供菜鸟成长参考).rar”为初学者提供了一条理解并掌握HTML的途径。下面将详细阐述HTML的相关知识点。 一、HTML概述 HTML是一种用于创建网页的标准标记语言,它由一系列元素组成,这些...

    python基础笔记html.rar

    "python基础笔记html"这个压缩包文件显然是一个关于Python基础知识的学习资料,包含了HTML格式的笔记,可能涵盖了变量、数据类型、控制结构、函数、模块等核心概念。 1. **Python简介**:Python是由Guido van ...

    HTML5学习笔记(总结提炼版)——001

    本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...

    韩顺平html+js+php+mysql的从入门到精通的全套笔记

    ### 韩顺平HTML+JS+PHP+MySQL从入门到精通全套笔记 #### HTML 运行原理与基本概念 1. **HTML简介** - **定义**:HTML(HyperText Markup Language)即超文本标记语言,是一种用于创建网页的标准标记语言。 - **...

    php简单程序(附笔记)

    在"php简单程序(附笔记)"的压缩包中,你将找到一些基础的PHP代码示例和相关的学习笔记,帮助你理解PHP的基本语法和功能。 1. **PHP基本语法**:PHP语句以分号结尾,变量以"$"符号开头,例如 `$name = "John";`。...

    c#,java,html,sqlsever记笔记软件

    描述中提到的"有我自己的一些SQL Server笔记,可自己写笔记"意味着这个压缩包可能包含了个人对SQL Server数据库管理系统的理解、实践经验以及一个可以用来创建和编辑笔记的平台。 首先,让我们从C#开始。C#是一种由...

    html自学网页笔记

    大部分标签都有开始标签和结束标签,例如`&lt;div&gt;`和`&lt;/div&gt;`,而一些简单的标签如` `(换行)和`&lt;img&gt;`(图像)则只需要开始标签。 三、HTML属性 属性是标签的附加信息,它们提供额外的描述或设置。例如,`&lt;a&gt;`...

Global site tag (gtag.js) - Google Analytics