从零开始的HTML笔记——初识HTML
HTML学习
一个例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一个页面</title> 6 </head> 7 <body> 8 <h1>我的第一个标题</h1> 9 <p>我的第一个段落。</p> 10 </body> 11 </html>
基本语法规范
1.标签：<html>
2双标签：<html> </html>
3.单标签：<br />
标签关系
1.包含关系:
1 <head> 2 <title> </title> 3 </head>
2.并列关系：
1 <head> </head> 2 <body> </body>
※：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
开发工具：
宇宙第一编辑器VScode、Sublime Text、DW、Webstrom，都是很优秀的HTML编辑器。
HTML文本：
1 <h1>这是一个标题。</h1> 2 <h2>这是一个标题。</h2> 3 <h3>这是一个标题。</h3> 4 <p>这是一个段落。</p> 5 <hr> 标签在HTML页面中创建水平线 6 <hr style="width:60%;height:16px;color:Red"/> 7 <p>这是一个段落。</p> 8 <hr> 9 <p>这是一个段落。</p> 10 <!-- 这是一个注释 --> 11 <p>这个<br>段落<br>演示了分行的效果</p> 12 <br>可以在不产生一个新段落的情况下进行换行 13 xhtml中为<br/><hr/> 14 <b>加粗文本</b> 15 <i>斜体文本</i> 16 <big>大字体<big> 17 <small>小字体<small> 18 空格标记" "
HTML列表：
HTML无序列表：
1 <ul style="list-style-type"> 2 <li>Morning</li> 3 <li>Night</li> 4 </ul>
HTML有序列表：
1 <ol style="list-style-type"> 2 <li>Morning</li> 3 <li>Night</li> 4 </ol>
HTML表格：
1 <tr>...</tr>---表格行标记 2 <th>...</th>---表格表头标记 3 <td>...</td>---表格单元格标记 4 <table border="1" align="center" width="250px"> 5 <tr bgcolor="Red"> 6 <th>Header 1</th> 7 <th>Header 2</th> 8 </tr> 9 <tr> 10 <td>row 1, cell 1</td> 11 <td>row 1, cell 2</td> 12 </tr> 13 <tr> 14 <td>row 2, cell 1</td> 15 <td>row 2, cell 2</td> 16 </tr> 17 </table>
HTML图像：
1 <img src="apple.jpg" alt="Pulpit rock" align="right" width="80%" height="80%">
HTML超链接：
1 <a href="https://www.bilibili.com/" target="_self">访问哔哩哔哩</a>
链接到其他网页：
1 <a href="url">锚点</a>
链接到图像上：
1 <a href="image_name.jpg">锚点</a>
链接到电子邮件：
1 <a href="mailto:电子邮件地址">锚点</a>
图片超链接：
1 <a href="url"><img src="图片文件名"/></a>
页内链接：
1 <a id="锚点名称">预被链接后显示的首部分</a> 2 <a href="#锚点名称">锚点</a> 3 <!--先使用id属性定义一个锚点，然后再使用href属性指向该锚点，“#”表示链接目标与a标记属于同一个页面。-->
HTML框架：
1 <iframe src="url"></iframe> 2 设置高度和宽度 3 <iframe src="demo_iframe.htm" width="250" height="100"></iframe> 4 frameborder属性用于定义iframe表示是否显示边框 5 设置属性值为“0”移除iframe的边框： 6 <iframe src="demo_iframe.htm" frameborder="0"></iframe> 7 使用iframe来显示目标链接页面 8 iframe可以显示一个目标链接的页面，目标链接的属性须使用iframe的属性，如: 9 <iframe src="demo_iframe.htm" name="iframe_a"></iframe> 10 <p><a href="http://www.bilibili.com" target="iframe_a">一个学习网站</a></p>
HTML表单：
1 Text Fields: 2 <form> 3 First name: <input type="text" name="firstname"><br> 4 Last name: <input type="text" name="lastname"> 5 </form> 6 密码：(不会明文显示，而是以星号和圆点替代) 7 <form> 8 Password: <input type="password" name="pwd"> 9 </form> 10 单选按钮： 11 <form> 12 <input type="radio" name="sex" value="男">男<br> 13 <input type="radio" name="sex" value="女">女14 </form> 15 复选框： 16 <form> 17 <input type="checkbox" name="vehicle" value="Book">I have a book<br> 18 <input type="checkbox" name="vehicle" value="Cup">I have a cup 19 </form> 20 提交按钮/重置按钮/普通按钮： 21 <form name="input" action="html_form_action.php" method="get"> 22 Username: <input type="text" name="user"> 23 <input type="submit|reset|button" value="按钮上显示的字符串"> 24 </form> 25 隐藏域： 26 <input type="hidden" name="控件名" value="值"/> 27 文件域： 28 <input type="file" name="文件域的名称">
JavaScript
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>JavaScript 函数定义</title>
6 </head>
7 <body>
8 <script>
9 <!--定义一个无参函数-->
10 function Hello()
11 {
12 return("Hello! Every One!");
13 }
14 <!--定义一个有参函数-->
15 function Add(a,b)
16 {
17 return (a+b);
18 }
19 <!--调用无参函数，在页面中显示函数的返回值-->
20 document.write(Hello());
21 <!--调用有参函数，并显示-->
22 var a=10,b=5;
23 var result=Add(a,b);
24 document.write("<br>"+a+"+"+b+"="+result);
25 </script>
26 </body>
27 </html>
JavaScript输出流：直接写入HTML输出流 e.g.：
1 document.write("<h1>这是一个标题</h1>");
2 document.write("<p>这是一个段落。</p>");
3 <!--只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。-->
本随笔是自己学习过程中的笔记，有不对的地方欢迎批评指正，勿扰，侵删。
赞 (0)