HTML基础标签

一、HTML介绍1、什么是HTML?HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如:使用< im

罗伊女士

6031人浏览 · 2022-03-23 16:13:06

罗伊女士 · 2022-03-23 16:13:06 发布

一、HTML介绍

1、什么是HTML?
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析
HTML标签都是预定义好的。例如:使用< img>展示图片

2、W3C标准:网页主要由三部分组成

结构:HTML
表现:css
行为:JavaScript

二、HTML快速入门

新建文本文件，后缀名改为.html
编写HTML结构标签
在< body>中定义文字

<html> html根标签
   <head>  加载资源信息和标题
      <title> </title> 
   </head>
   <body>
      <font color = "red" >正文 </font>
   </body>
</html>

1、HTML文件以.htm或.html为扩展名
2、HTML结构标签

< HTML>：定义HTML文档
< head>：定义关于文档的信息
< title>：定义文裆的标题
< body>：定义文档的主体

3、HTML标签不区分大小写
4、HTML标签属性值单双引皆可
5、HTML语法松散

三、基础标签

1、< h1> ~< h6> ：定义标题，h1最大，h6最小；

用法：< h1>我是标题h1< /h1>

2、< font>：定义文本的字体、字体尺寸、字体颜色（css完成）；

用法：< font face = “楷体” size = “5” color = “red”> 字体大小和颜色 < /font>

html表示颜色：
（1）英文单词：red,pink,blue…
（2）rgb(值1，值2，值3)，红绿蓝，值的取值范围：0~255，如red(255,0,0)
（3）#值1值2值3：16进制，值的范围：00~ff

3、< hr>：定义水平线

4、< b>：定义粗体文本

5、< i>：定义斜体文本

6、< u>：定义文本下划线

7、< center>：定义文本居中(css完成)

8、< p > ：定义段落

9、< br>：定义换行

在这里插入图片描述

四、图片、音频、视频标签

1、img:定义图片

src:规定显示图像的URL（统一资源定位符)
height:定义图像的高度
width:定义图像的宽度

2、audio:定义音频。支持的音频格式:MP3、WAV、OGG

src:规定音频的URL
controls:显示摇放控件

3、video:定义视频。支持的音频格式:MP4、WAV、OGG

src:规定视频的URL
controls:显示播放控件

4、资源路径：

绝对路径：完整路径
相对路径（更常用）：相对位置关系

5、尺寸单位：

px：像素
百分比：占整个body的比例

五、超链接标签

< a> ：定义超链接，用于连接到另一个资源

（1）href：指定访问资源的URL

（2）target:指定打开资源的方式

_self：默认值，在当前页面打开
_blank：在空白页面打开

通常在页面内部跳转使用_self，跳转到外部资源用_blank

<a href="http://www.baidu.com" target="_blank"> 点我有惊喜嗷</a>

六、列表标签

< ol>：有序列表（标注123…）

序号可以使用type属性设置

< ul>：无序列表（用圆点标识）
< li>：定义列表项

<ol type = "A">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>奶茶</li>
</ol>

七、表单标签及表单项标签

表单：在网页中主要负责数据采集功能，使用< form>标签定义表单
表单项(元素)：不同类型的input元素、下拉列表、文本域等

（一）form：定义表单

（1）action：规定当提交表单时向何处发送表单数据，URL；
表单项数据要想被提交，必须指定其name属性。

（2）method :规定用于发送表单数据的方式

get：（默认值）浏览器会将数据直接附在表单的action URL之后。长度有限制
post：浏览器会将数据放到http请求消息体中。长度无限制

<form action="#" method="post">
    <!--定义文本输入框-->
    <input type="text" name="username">
    <!--定义按钮，将内容提交到服务器-->
    <input type="submit">
</form>

（二）表单标签

< input>:表单项，通过type属性控制输入形式
< select> :定义下拉列表，< option>定义列表项
< textarea> ：文本域

< input>标签的type属性：
在这里插入图片描述

<body>


<form action="#" method="post">
    <!--拓宽点击范围，想要点击文字就跳到对应的文本框里，使用label，属性for后面跟文本框的id-->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username">
    <br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password">
    <br>

    <!--单选框-->
    <!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
    <!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分是男是女-->
    性别：
    <input type="radio" name="gender" value="1" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female">
    <label for="female">女</label>

    <br>

    <!--复选框-->
    爱好:
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">阅读

    <br>

    <!--上传按钮-->
    头像:
    <input type="file"><br>

    <!--定义下拉列表-->
    <!--如果有value值,则提交value值,无value值,则提交标签内的内容-->
    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
        <option>天津</option>
    </select>
    <br>

    <!--定义文本域,下面的五行二十列(也就是一行写20个字,一共五行)-->
    个人描述:
    <textarea cols="20" rows="5" name="desc"></textarea>
    <!--定义隐藏字段-->
    <input type="hidden" name="id" value="123"><br>

    <!--注册按钮-->
    <input type="submit" value="注册">

    <!--重置按钮-->
    <input type="reset" value="重置">

    <!--按钮-->
    <input type="button" value="一个普通按钮">



</form>
</body>