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>

实际的页面如下:

xcx'c

相关推荐
阿伟来咯~19 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端24 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱26 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai36 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨37 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry3 小时前
JS常用数组方法 reduce filter find forEach
javascript
DogEgg_0013 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html