html
jerry2 Architect
  2019-03-05 16:37:11 2019-03-05 16:37    1.2k 字  4 分钟  

HTML

​ hyperText markup language 超文本标记语言

​ 超文本 : 可以显示文字的颜色，图片，点击超链接。

​ 标记语言 : 其它的标记语言xml。文档中都是有标签构成的

HelloWorld

1
2
3
4
5
6
7
8
<html>
<head>
<title>网页标题</title>
</head>
<body>
    HelloWold
</body>
</html>

结构介绍

  • 标签：在html里面被<>括起来的叫做标签。
  • 开始标签：<标签名>
  • 结束标签：</标签名>被这个括起来的就是结束标签
  • 根标签：html文档中的第一个标签我们称为根标签。
  • 子标签：标签内部的标签，就是子标签。
  • 父标签：标签外面被套着的标签就是父标签。
  • 标签内容：开始标签和结束标签之间的文本内容，我们称为标签内容。
  • 自闭和标签：没有标签内容，开始标签和结束标签合二为一。<meta/>``<br/>``<img/>
  • 标签属性：写在开始标签里面 标签名结束后来一个空格， key=值
  • 一个标签是有四部分组成。开始标签，标签属性（可选），标签内容，结束标签（自闭和标签是没有）。

常见标签

标题标签

1
2
3
4
5
6
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h4>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

换行标签

1
<br/>

段落标签

1
<p>

水平线标签

1
<hr/>

图片标签

1
<img src="" height="" width=""/>

属性src表示的是引用图片的地址。Height是图片的高度，width是图片的宽度。单位是px像素。

超链接标签

1
<a href="" target="">点我</a>

href表示点击超链接后要跳转的页面，target是打开新页面的方式。

无序列表

1
2
3
4
5
6
7
<ul type="">

    <li>苹果</li>

    <li>香蕉</li>

</ul>

ul是列表，li是列表项。Type属性表示列表项前面的符号。Desc，circle，square

有序列表

1
2
3
4
5
6
7
<ol type="">

    <li>苹果</li>

    <li>香蕉</li>

</ol>

ol表示有序列表，li表示列表项。Type属性表示有序列表项前面的符号，1，a，i

注释

1
<!--  html注释   -->

Table表格

table标签：表示一个表格。属性：border表格的边框，cellspacing表格边框和单元格之间的间隙。align表示表格的水平位置，值有left,center,right。bgcolor属性表示的是表格的背景颜色。

tr标签：表格里面的行标签。一个tr表示一行。必须作为table标签的子标签。在tr里面是不能之间写表格里面要展示的内容的。表格要展示的内容必须写在td里面。

td标签：表格的单元格标签。一个td就表示一个单元格。属性：align单元格的内容的水平位置。colspan让单元格跨列。rowspan让单元格跨行。

注意事项：

  • td的父标签必须是tr，tr的父标签一定是table。
  • 表格要展示的内容必须写在td里面。
  • 单元格跨行或者跨列后，相应位置的单元格个数应该减少。

form表单

  • Form标签是表单标签，所有的表单元素都要写在form标签里面。
  • Form标签有一个action属性，他的含义是点击提交按钮后要跳转的页面。
  • 为了页面更加的整齐，form表单会跟表格标签在一块搭配使用
表单元素
文本框
1
<input type="text" value=""/>

value是文本框的默认值。

密码框
1
<input type="password" value=""/>
提交按钮
1
<input type="submit" value=""/>

value属性是按钮上显示的文字。

单选框
1
<input type="radio"/>

要想使多个单选框之间互斥，需要在这多个单选框里面加上 相同的name属性。默认选中的单选框上面需要添加checked=”checked”属性。

复选框
1
<input type="checkbox" checked="checkedd"/>
大文本框
1
<textarea rows="" cols=""></textarea>

rows表示行数，cols表示列数。大文本框中 的默认内容要写成标签内容。

下拉列表框
1
<select></select>
下拉选项
1
<option selected="selected">高中</option>

selected是否默认被选中。

文件域
1
<input type="file"/>
按钮
1
2
<input type=”reset” value=”重置按钮”/>
<input type=”button” value=”普通按钮”/>
 评论