HTML~

最新推荐文章于 2024-06-04 08:19:41 发布

兮如风.

最新推荐文章于 2024-06-04 08:19:41 发布

阅读量1.2k

点赞数 25

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_80460489/article/details/136421811

版权

HTML

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

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言:由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的。例如:使用<img>展示图片

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

结构:HTML

表现:CSS

行为:JavaScript

1，HTML入门

1．新建文本文件，后缀名改为.html

2．编写HTML结构标签

3．在<body>中定义文字

<html>
    <head>
        <title>html 快速入门</title>
    </head>
    <body>
    <font color="red">乾坤未定，你我皆是黑马~</font>
    </body>
</html>

HTML结构标签:

标签	描述
<HTML>	定义HTML文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主题

HTML标签不区分大小写

HTML标签属性值单双引皆可

HTML语法松散

2，基础标签

标签	描述
<h1> ~ <h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线

html表示颜色:
    1．英文单词: red , pink , blue . . .
    2. rgb(值1,值2,值3):值的取值范围:0~255 rgb(255,0,0)
    3．#值1值2值3:值的范围:00~FF

转义字符:

HTML源代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	"	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

3，图片，音频，视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img:定义图片

src:规定显示图像的URL(统一资源定位符)

height:定义图像的高度

width:定义图像的宽度

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

src:规定音频的URL

controls:显示播放控件

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

src:规定视频的URL

controls:显示播放控件

尺寸单位:px和%

资源路径:

1.绝对路径:完整路径

2.相对路径:相对位置关系

4，超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href:指定访问资源的URL

target:指定打开资源的方式

_self:默认值，在当前页面打开

_blank:在空白页面打开

<a href="http://www.itcast.cn" target="_blank">点我有惊喜</a>

5，列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type:设置项目符号

    <ol>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ol>

    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ul>

6，表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table:定义表格

border:规定表格边框的宽度

width :规定表格的宽度

cellspacing:规定单元格之间的空白

tr:定义行

align:定义表格行的内容对齐方式

td:定义单元格

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

    <table border="1" cellspacing="0" width="500">
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr align="center">
            <td>010</td>
            <td>a</td>
            <td>三只松鼠</td>
            <td>三只松鼠</td>
        </tr>
        <tr align="center">
            <td>009</td>
            <td>b</td>
            <td>优衣库</td>
            <td>优衣库</td>
        </tr>
        <tr align="center">
            <td>008</td>
            <td>c</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
        </tr>
    </table>

7，布局标签

标签	描述
<div>	定义HTML文档中的一个区域部分，经常与cSS一起使用，用来布局网页
<span>	用于组合行内元素

8，表单标签

表单:在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素):不同类型的input元素、下拉列表、文本域等

（1）表单

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

（1）form:定义表单

1）action:规定当提交表单时向何处发送表单数据，URL

#表单项数据要想被提交，则必须指定其name属性

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

【1】get:浏览器会将数据直接附在表单的action URI之后。大小有限制

请求参数会拼接在url后面

url长度有限制 4KB

【2】post:浏览器会将数据放到http请求消息体中。大小无限制

请求参数会在http请求协议的请求体中

（2）表单项

<input>:表单项，通过type属性控制输入形式

<select>:定义下拉列表，<option>定义列表项

<textarea>︰文本域

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

    <form action="#" method="post">

        <input type="hidden" name="id" value="123">

        <label for="username">用户名:</label>
        <input type="text" name="username" id="username"><br>

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

        性别:
        <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" id="trip"> <label for="trip">旅游</label>
        <input type="checkbox" name="hobby" value="2" id="movie"> <label for="movie">电影</label>
        <input type="checkbox" name="hobby" value="3" id="game"> <label for="game">游戏</label>
        <br>

        头像:
        <input type="file">
        <br>

        城市:
        <select name="city">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
        <br>

        个人描述:
        <textarea cols="20" rows="5"></textarea>
        <br>

        <br>
        <input type="submit" value="免费注册">

        <input type="reset" value="重置">

        <input type="button" value="一个按钮">

    </form>

兮如风.

关注

25
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
HTML~

HTMLHTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Language):超文本标记语言超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言:由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如:使用<img>展示图片W3C标准:网页主要由三部分组成结构:HTML表现:CSS行为:JavaScript。
复制链接

扫一扫