HTML基础教程(一)

1、没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。

       如<br>。在开始标签中添加斜杠,比如<br/>,是关闭空元素的正确方法。

2、HTML标签对大小写不敏感,但推荐小写。

3、属性值应该始终被包括在括号内。

4、注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

        <!-- This is a comment -->

5、使用空的段落标记 <p></p> 插入空行是个坏习惯。 <br /> 标签代替它!

6、HTML5的style属性:font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸;background-color定义背景颜色;text-align属性规定了元素中文本的水平对齐方式。

      <body style = "background-color:yellow">

7、HTML <code> 元素定义编程代码示例,<code> 元素不保留多余的空格和折行(使用<pre>实现保留)。

8、外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

        <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>

  内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。

        <head>
        <style type="text/css">
        body {background-color: red}
        p {margin-left: 20px}
        </style>
        </head>

  内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。

        <p style="color: red; margin-left: 20px">
        This is a paragraph
        </p>

9、HTML 链接 - target 属性:使用 Target 属性,你可以定义被链接的文档在何处显示。

       target="_black"时,表示网页将会在新窗口被打开。

10、使用邮件链接时,应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。

11、替换文本属性(Alt):alt 属性用来为图像定义一串预备的可替换的文本。

        <img src="boat.gif" alt="Big Boat">

12、创建图像映射:http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

13、表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。

14、表格的表头:表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

15、使用 "frame" 属性来控制围绕表格的边框:http://www.w3school.com.cn/tiy/t.asp?f=html_table_frame

16、无序列表始于 <ul> 标签。每个列表项始于 <li>。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

       自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

17、margin和padding的区别:

       margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

       padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

18、iframe 可用作链接的目标(target)。链接的 target 属性必须引用 iframe 的 name 属性。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

19、<body> 拥有两个配置背景的标签,颜色(Bgcolor)或者图像(BackGround)。

(在最新HTML标准中已废弃,应该使用CSS来定义。)

20、如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

21、HTML <base> 标签为页面上的所有链接规定默认地址或默认目标(target)。

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

22、HTML<link> 标签定义文档与外部资源之间的关系,最常用于连接样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

23、HTML<meta>元素重定向:http://www.w3school.com.cn/tags/tag_meta.asp

<meta http-equiv="Refresh" content="5;url=http://www.baidu.com " />

24、HTML字符实体:

25、HTML 颜色:颜色由红色、绿色、蓝色混合而成。

仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue,fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,white, yellow。

26、带有最少的必需标签的 XHTML 文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
......
</body>
</html>

27、如何从 HTML 转换到 XHTML:

向每张页面的第一行添加 XHTML <!DOCTYPE>、向每张页面的 html 元素添加 xmlns 属性、把所有元素名改为小写、关闭所有空元素、把所有属性名改为小写、为所有属性值加引号。

28、HTML表单:

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

GET(默认方法):如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的。

POST:如果表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

(GET 最适合少量数据的提交。浏览器会设定容量限制。)

Name 属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。

29、<fieldset> 元素组合表单中的相关数据,<legend> 元素为其定义标题。

30、HTML Form 属性:已设置所有可能的属性。

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
form elements
</form>

31、HTML5 <datalist> 元素:<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

32、<input type="number">用于应该包含数字值的输入字段,能对数字做出限制。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

33、这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

34、autocomplete 属性规定表单或输入字段是否应该自动完成,当自动完成开启,浏览器会基于用户之前的输入值自动填写值(on/off)。

autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

35、novalidate 属性属于 <form> 属性。如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form> 

36、formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性,适用于 type="submit" 以及 type="image"。

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form> 

37、formmethod 属性定义用以向 action URL 发送表单数据的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性,适用于 type="submit" 以及 type="image"。

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp"
   value="Submit using POST">
</form> 

38、formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收响应。

formtarget 属性会覆盖 <form> 元素的 target 属性,可与 type="submit" 和 type="image" 使用。

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank"
   value="Submit to a new window">
</form> 

39、pattern 属性规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。

<form action="/example/html5/demo_form.asp" method="get">
国家代码:<input type="text" name="country_code" pattern="[A-z]{3}">
<input type="submit" />
</form>

40、placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述),该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="First name">

41、required 属性是布尔属性。设置则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

Username: <input type="text" name="username" required>

42、step 属性规定 <input> 元素的合法数字间隔。

step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 、week。可与 max、 min 属性一同使用,来创建合法值的范围。

<input type="number" name="points" step="3">

 


  • 0
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值