HTML
HTML是一种超文本标记语言,超文本是指,除了文本之外,还可能包含图片,音频,或者评注等的 文本形式,比文本强大,通过链接和交互方式来组织和呈现信息.标记语言是指,由标签构成的语言.HTML定义了多种不同的标签,用来表示不同的内容.
标签的介绍:
1.<h3> 三级 </h3>
标签名h3要放在<>中,大部分标签成对出现 ,<h3>是开始标签</h3>是结束标签,也有部分标签只有开始标签,称之为"单标签".开始标签和结束标签之间写的是标签的内容.开始标签也可以设置属性.id属性相当于一个标识符,唯一表示一个标签.
HTML 文件的基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
hello,world
</body>
</html>
html标签是整个html文件的根标签.head标签写页面的属性.body标签中写的是页面上要显示内容.title标签是页面的标题.由标签的排布将标签之间可以分为父子关系和兄弟关系.上面的标签中html标签就是head和body标签的父标签.head和body标签之间的关系就是兄弟标签.
1.1常见的HTML标签的介绍
标题标签h1-h6,有六个,从h1到h6.数字越大字体越小.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落标签,在HTML中,段落,换行符,空格都会失效,如果需要分成段落,就需要使用专门的标签. P标签表示一个段落.
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个 段落</p>
</body>
p标签描述的段落,前面没有缩进.自动根据浏览器来排版.html首尾处的换行,空格都无效.在html中文字之间输入的多个空格只相当于一个空格.html中直接输入换行不会真的换行,而是相当于一个空格.
换行标签:br 这是一个单标签,用来实现换行.<br/>比<p>标签的空隙小.
<body>
换行标签<br/>接下来会进行换行
</body>
图片标签:img img标签必须带有src属性.表示图片的路径.这个路径既可以是绝对路径也可以是相对路径.
<body>
<img src="D:\新建文件夹 2\新建文件夹\31.jpg" width=400px>
<img src="picture/31.jpg" width="300px">
img标签除了src属性用来表示图片的路径之外,还有width/height:控制宽度和高度.只需修改一个即可,会按照等比例缩放,否则图片就会失衡.
注意属性有多个,不能写到标签之前,属性之间可以用空格分隔,也可以是换行分隔.属性之间不分先后顺序.
超链接:a href:必须具备,表示点击后会跳转到那个界面. target:打开方式,默认是_self.如果是_blank则会用新的标签页打开.
<body>
<a href="https://www.jd.com">京东</a>
</body>
点击之后会跳转到京东的页面.这里是在原有的页面上生成一个京东的页面,也可以保留原有页面,新生成一个页面.如下:
<body>
<a href="https://www.jd.com">京东</a><br/>
<a href="https://www.jd.com" href="_blank">京东2</a>
</body>
空连接:使用#在href中占位,仅仅只是占位的作用,点击之后不会发生跳转.
表格标签:table标签:表示整个表格 tr:表示表格的一行. td:表示一个单元格 thead:表格的头部位置.
tbody:表格的主体位置.表格标签有一些属性,可以用于设置大小边框等.这些属性都要放在table标签中,align是表格相对于周围其他元素的对齐方式.border表示边框,可以用来设置表格边框的像素.cellpadding:表格中内容距离边框的距离,默认是1像素. cellspacing:单元格之间的距离,默认是2像素.width/height:设置尺寸.
<body>
<table align="center" border="2" cellpadding="3" cellspacing="3" width="400" heigth="300">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>李四</td>
<td>12</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
</tr>
</table>
</body>
表单标签:表单是让用户输入信息的重要途径.分成两个部分:表单域:包含表单元素的区域.重点是form标签. 表单控件:输入框,提交按钮等.重点是input标签.
form标签,描述了要把数据按照什么方式,提交到那个页面中. input标签,各种输入控件,单行文本框,按钮,单选框,复选框. type(必须有),取值种类很多,button,checkbox,text,file,image,password等. name:给input起了个名字,尤其是对于单选按钮,具有相同的name才能多选一.value:input中的默认值.checked:默认被选中.
<body>
<form>
用户名:<input type="text"><br/>
密码:<input type="password"><br/>
性别:<input type="radio" name="gender" id="male"><label for="male">男
<input type="radio" name="gender" id="female"> <label for="female">女
<br/>
兴趣爱好:<input type="checkbox"> 篮球 <input type="checkbox">足球<br/>
<input type="checkbox"> 网球 <input type="checkbox"> 羽毛球
居住的城市:<br/>
<select>
<option>西安</option>
<option selected="selected">昆明</option>
</select>
</form>
</body>
无语义标签:div&span
div标签,division的缩写,含义是分割 span标签,含义是跨度.用于网页布局的两个标签.
div是独占一行 span不独占一行.
<body>
<div>
<span>t1</span>
<span>t2</span>
<span>t3</span>
</div>
<div>
<span>t4</span>
<span>t5</span>
<span>t6</span>
</div>
</body>
实现一个用户注册页面:
<body>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="button"value="注册">
已有帐号?
<a href="#">登录</a><br/>
</div>
</body>
实际的页面如下:
xcx'c