一、html介绍
html注释
写法:<!--注释的内容--> 在浏览器中看不到,只能在代码中看到注释的内容。
意义:
1.把暂时不用的代码注释起来,方便以后使用。
2.对开发人员进行提示。
快捷添加注释:
ctrl+/
<!--
html是用来描述网页的一种语言,中文是超文本标记语言
html不是编程语言,是标记语言
标记语言的标记,实际上指的是一套标记标签
html使用标记标签来描述网页
html文档包含了html标签以及文本内容
html文档,也可以叫做web页面,或者叫网页
html标签,是用尖括号包裹的关键词
标签通常是成对存在的(也有单独的),第一个是开始标签,第二个是结束标签,结束标签的关键字前面有一个/
标签不允许自定义
标签必须小写
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23</title> <!--标题-->
</head>
<body> <!--正文-->
</body>
</html>
二、内联元素和块级元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联元素和块级元素</title> <!--元素就是标签的意思--> </head> <body> <!--块级元素每一个标签对要占据单独的一行,因为他需要的宽度,就是你浏览器的宽度,块级元素内部可以放内联元素或者块级元素 --> <div>abc</div> <div>def</div> <!--内联元素,不需要占据页面的全宽,可以紧接着上一个元素的后面开始,他只需要占据他的内容需要的宽度,内联元素的宽高是不可以改变的,内联元素内部不可以放块级元素 ,只可以放内联元素--> <span>qwe2</span> <span>ewq2</span> </body> </html>
块级元素介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级标签</title> </head> <body> <!--html里面标签可以传参数,但是参数与参数之间或者参数和关键字之间,要用空格隔开--> <!--段落标签--> <p>abc</p> <p>def</p> <!--列表标签,可以分为三种,有序列表,无序列表,定义列表--> <!--有序列表,ol代表整个有序列表,li代表里面每一个列表项,默认情况下用数字来作为序号,type可以修改序号的类型,start可以修改起始序号--> <ol type="a"> <li>abc</li> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> <!--无序列表--> <ul> <li>123</li> <li>456</li> <li>789</li> <li>000</li> </ul> <!--定义列表--> <dt>123</dt> <dd>意思就是数字123</dd> <dt>456</dt> <dd>意思就是数字456</dd> <!--div标签,也叫盒子标签--> <div>000</div> <!--标题标签,根据等级可以分为六个,h1到h6,数字越小,字体越大--> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html>
三、表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--table就代表一个表格,所有这个表格的内容,都要放在这对标签中间--> <!--border就是边框,cellspacing就是单元格距离--> <table border="1" cellspacing="0"> <tr> <!-- 表头--> <th>编号</th> <th>姓名</th> <th>备注</th> </tr> <!-- tr就等于一行--> <tr> <!-- td就等于一行中的一个单元格--> <!-- rowspan 合并行 --> <td rowspan="2">1</td> <td>11</td> <td>111</td> </tr> <tr> <td>2</td> <td>22</td> <td>222</td> </tr> <tr> <td>3</td> <td>33</td> <td>333</td> </tr> <tr> <!-- colspan就是让这个td占据两列的位置,叫做合并列 --> <td colspan="2">4</td> <td>44</td> <td>444</td> </tr> </table> </body> </html>
四、表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单介绍</title> </head> <body> <!--对于用户输入来说,只有设置了name属性的元素,才能在提交表单时传递他们的值,name属性规定了input元素的名称(随便取),name可以重复--> <!--对于用户选择来说,只有设置了value属性,才可以在表单提交时,传递他们的值,value属性规定了这个input的值--> <!--如果决定上面这两个难以区分,那就记住,不管是用户输入还是用户选择,都要写上name和value两个属性,只不过用户输入的value值等于空字符串--> <!--表单标签,所有表单内容都要放在这个标签对里面--> <!--action属性是用来设置提交路径的,也就是说你这个表单要提交到哪里去--> <form action=""> <!--text类型的input标签会在页面显示一个文本框,作用是让用户输入--> <!--placeholder就是显示在文本框中的提示--> 用户名:<input type="text" placeholder="请输入用户名" name="user"><br> <!--type等于password的时候,输入的内容,会自动变成小黑点,目的是为了安全--> 密 码:<input type="password" placeholder="请输入密码" name="passwd"><br> <!-- type等于submit的input,它会变成一个提交按钮,作用就是提交表单数据到action设置的url里面--> <!-- 单选框和复选框--> <!-- 同组的单选框必须设置同样的name,不然它会变成多选--> 性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br> 兴趣爱好:唱歌<input type="checkbox" name="hobby" value="唱歌"> 跳舞<input type="checkbox" name="hobby" value="跳舞"> 打篮球<input type="checkbox" name="hobby" value="打篮球"><br> <!-- 下拉框,也是用来选择的,跟单选框效果差不多,设置下拉框中具体选项标签是option--> 籍贯:<select name="select" id="s1"> <!-- selected规定了默认的选项--> <option value="湖南">湖南</option> <option value="湖北">湖北</option> <option value="江苏">江苏</option> </select><br> <!-- 文件上传--> <!-- 对上传的内容做出限制的话,就要设置accept属性--> 头像:<input type="file" name="chooseFile" accept="image/bmp"><br> <!-- 文本域,跟文本域差不多,只不过可以调整宽高,显示一大块文本框--> 个人简介:<textarea name="ta" id="ta1" cols="30" rows="10"></textarea><br> <!-- 这个按钮会默认显示提交,如果要修改,就要改变他的value值--> <input type="submit" value="登录"> <!--type等于reset的input,它会变成重置按钮,作用就是清空表单里面刚刚输入的内容--> <input type="reset"> </form> </body> </html>