HTML的介绍

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>

实际的页面如下: