HTML网页基础(超文本标记语言)

我终于对前端下手了（

1.1入门

1.创建html文件，后缀名为html或者htm
2.标签分类

单标签
双标签：有开始标签和结束标签 内容 内容 结束标签需要添加/

3.标签可以嵌套使用的（不能出现交叉嵌套）

正确：这是文字
错误：这是文字

4.在开始标签中可以定义属性，属性由键值对组成，值需要使用引号引起来。一个标签中可以写多个属性，多个属性之间使用空格隔开。

5.html的标签不区分大小写。建议都使用小写。

示例

<html>
    <head>
        <title>title</title>
    </head>

    <body>
        <font color='red' size = '5'>Hello World</font><br/>
        <font color='green'>Hello World</font>
    </body>
	
</html>

1.2 常用标签

1.2.1 文件标签

构成html网页的基本标签

1.<!DOCTYPE html> 用于指定当前文档的类型
2.html ：是文档的根标签,html文档中只有一个根标签，其他的标签都只能是根标签的子标签。
3.head ：头标签 包含了文档的咨询信息，当前文档的配置，引入其他的资源。
4.meta ：告知浏览器，使用什么方式来编码。浏览器默认的编码方式是gbk
5.title：设置网页的标题
6.body：用于定义网页的主体内容

例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        好好学习 天天向上
    </body>
</html>

1.2.2 文本标签

注释标签 <!--被注释的内容-->
标题标签 h1~h6
	特点：具有加粗和加黑的效果。从h1~h6大小是逐级递减。标题标签独占一行。
段落标签：<p>段落的内容</p>
	特点：段落与段落之间由空行隔开。
	
换行标签：<br/>  注意：单标签的写法  <标签名/>
	
水平线标签：<hr/>
	属性：
        1.color:设置水平线的颜色
        2.width:设置水平线的宽度
        3.align:设置水平线的对齐方式
        	left  center(默认值)  rigth
        4.size:设置水平线的粗细
        	
加粗标签: <b>粗体文本</b>         <strong>强调文本</strong>

倾斜标签：<i>斜体文本</i>  <em>强调斜体文本</em>

下划线标签:<u>带下划线的文本</u>

字体标签:font
	font标签是字体标签 默认没有任何效果，需要结合属性使用
            1.color:设置文字的颜色
            2.size:设置文字的大小
                范围：1~7 超过7还是7,默认值为3.
            3.face:设置文字的字体
                对应的需要在电脑中安装了对应的字体才有效果。（也可以使用css设计样式）

颜色的写法

1.直接写颜色单词：red  green  yellow  blue   pink  purple  orange
2.#6个数字   十六进制的数字（0~9a~f）
            #ff0000  #E91D1D
2.rgb(数字1,数字2,数字3);数字的范围是0~255.存在浏览器兼容性问题。

尺寸的写法

1.数值  width="600" 单位默认就是px(像素)
2.百分比：width="50%" 占比相对于父元素的比例

1.2.3 图片标签

img标签
    属性
    1.src:设置要显示的图片的路径。这是一个必须的属性。
    2.width:设置图片的宽度
    3.height:设置图片的高度
    	为了保证图片不变形，设置了其中的一个 另一个就会等比例所缩放。
    4.title:设置鼠标悬浮在图片上的提示信息
    5.alt:设置图片不正常加载时的提示信息
    6.title:设置图片边框的粗细

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <img src="1.png" width="50%" height="40%" title="这个猫猫是我的！！！" alt="麻薯图片" 			border="50"/>
    </body>
</html>

1.2.4 超链接标签

  <a>标签：
    属性：
  	href:要链接的路径   如果要跳转到其他项目中 需要添加协议。
  	
  	target:设置连接打开的位置
  		_self:在当前的窗体打开
  		_blank ：在新窗体中打开

示例

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>超链接页面</title>
  </head>
  <body>
    
      点击我可以 <a href="1.html" target="_self">看猫猫</a>     <!--当前目录下的1.html-->
      <a href="http://www.jd.com">跳转到京东</a>
      <a href="#">我是一个超链接</a>
  </body>

1.2.5 表格标签

1.2.5.1 表格标签三要素

table:定义表格
tr:定义行
td:定义单元格

1.2.5.2 表格标签的属性

 1.border：用于设置表格的边框粗细，表格默认没有边框。
 2.cellspacing:设置单元格之间的距离
 3.width:设置表格的宽度
 4.height:设置表格高度
 5.align:设置表格的对齐方式：left  center right
 6.bgcolor:设置表格的背景颜色
 7.cellpadding:设置内容到边框之间的距离

示例

<table border="1" cellspacing="0" width="50%" height="300px" align="center" bgcolor="orange" cellpadding="50">
        <!--第一行-->
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>

        <!--第二行-->
        <tr bgcolor="#ffc0cb" align="center" height="50">  <!--行标签也可以设置属性-->
            <td>1</td>
            <td>旺财</td>
            <td>18</td>
        </tr>
        <!--第三行-->
        <tr>
            <td>2</td>
            <td>小强</td>
            <td>18</td>
        </tr>

        <!--第四行-->
        <tr>
            <td>3</td>
            <td>小黑</td>
            <td>18</td>
        </tr>
    </table>

1.2.6 表单标签（用于收集用户信息,一次性提交后端,和服务器进行交互）

1.2.6.2 表单标签

form:用于确定一个提交的范围,提交按钮在那个表单中就把那个表单提交
属性：
action:用于指定表单提交到服务器的路径
method:表单的提交方式
get:【默认的】
        1.数据是通过地址栏【url】提交的。
        2.对数据提交有大小的限制。【浏览器限制的】
        3.数据在地址栏中可见的，相对不安全。
post:
	1.数据是通过请求体提交。
	2.对数据的提交没有大小的限制。
	3.数据在地址栏中可见的，相对会更安全一些。

注意：get/post都是明文传输数据。都是不安全的。

1.2.6.3 表单项标签

 数据要能够提交 必须给框取名 通过name属性
        input输入标记
            0. number:数值输入框
            
            1.text:普通文本输入框
               属性：
               1.placeholder 设置输入框的提示信息。
               2.size:设置输入框可见的宽度
               3.value:设置输入框的默认值【可以修改】

            2.password:密码输入框  输入的内容显示掩码。
               1.placeholder 设置输入框的提示信息。
               2.size:设置输入框可见的宽度
               3.value:设置输入框的默认值【可以修改】
               
            3.radio:单选按钮
                真正提交的值是value中的值。
                要实现多个单元按钮只能选择一个，需要保证他们的name属性是一样的。
                checked:设置默认选中。

            4.checkbox:复选按钮
                真正提交的值是value中的值。
                checked:设置默认选中。

            5.date:日期组件

            6.file:文件域

            7.hidden:隐藏域
                使用场景：服务器需要这个数据，但是希望在浏览器中不要显示出来。

            8.submit:提交按钮
                作用：将按钮所在的表单的内容提交到action指定的服务器中
                value:用于指定按钮上面的文字

            9.reset:重置按钮
                作用：将表单的内容还原成最初的样子
                value:用于指定按钮上面的文字

            10.button:普通按钮
                作用：默认没有任何作用，后期会结合点击事件使用。

            11.image:图片提交按钮
                作用：将按钮所在的表单的内容提交到action指定的服务器中

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="#">
        用户名：<input type="text"><br>
        密码：<input type="password"><br>
        年龄：<input type="number"><br>
        性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
        爱好：<input type="checkbox">唱歌
              <input type="checkbox">跳舞
              <input type="checkbox">睡觉
              <input type="checkbox">打游戏<br>
        头像：<input type="file"><br>
        生日：<input type="date"><br>
        <input type="submit" value="提交信息">
    </form>
</body>
</html>

posted @ 2025-07-26 18:17 汣姒阅读(64) 评论(0) 收藏举报

刷新页面返回顶部

jiusi-94