HTML前端：标签

xhj～

已于 2022-05-08 16:21:13 修改

阅读量304

点赞数

文章标签： html 前端 css

于 2022-05-08 15:25:37 首次发布

本文链接：https://blog.csdn.net/weixin_69015220/article/details/124619141

版权

html前端：

图像

定义图像的语法是：
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

设置图像的高度与宽度
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML 表格

表格
由 < table> 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML 表格表头
表格的表头使用标签进行定义。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

单元格跨两列横向 colspan

<table border="1px">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>

单元格跨两行竖向 rowspan

<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>

单元格边距:cellpadding

<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>

单元格间距 cellspacing

<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>

带有标题的表格： < caption> 标签

<table border="1">
  <caption>标题</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>

HTML 表单和输入

我们可以使用 < form> 标签来创建表单:
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 < input>。
输入类型是由 type 属性定义。

输入框
输入框和一个秘密输入框：

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

文本域（Text Fields）
文本域通过 < input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

输入隐藏提示 autocomplete=“off”

 <form action="" method="get">
        <input type="text" name="account" value="" id="account" placeholder="请输入账号" autocomplete="off">
        <input type="submit" value="提交">
    </form>

密码字段
密码字段通过标签 < input type=“password”> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）
< input type=“radio”> 标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

多选框（Checkboxes）
< input type=“checkbox”> 定义了复选框。
复选框可以选取一个或多个选项：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit)
< input type=“submit”> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
账号: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

post：表单数据会包含在表单体内然后发送给服务器，同于提交敏感数据，如用户名与密码等。

<form method="post">

get：默认值，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。

<form>

下拉列表 select

 籍贯：
       <select name="hometown" id="hometown">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="jilin">吉林</option>
    </select>

多选下拉列表 multiple

 水果：
        <select name="fruits" id="fruits" multiple>
                <option value="banana">香蕉</option>
                <option value="apple">苹果</option>
                <option value="pear">梨子</option>
       </select>

文本框
用户可在文本域中写入文本。可写入字符的字数不受限制。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

<form action="">
<input type="button" value="Hello world!">
</form>

带边框的表单< fieldset>
本例演示如何在数据周围绘制一个带标题的框。

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

预定义输入框的选项 datalist
下面是一个元素，中描述了其可能的值：

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

class属性
input标签的class属性是用来引用你页面的类样式。

<style>
	.intro {
    	color:blue;
	}
	.important {
    	color:green;
	}
</style>
</head>
<body>

	<h1 class="intro">标题 1</h1>
	<p>段落。</p>
<p class="important">注意颜色</p>

< div> 盒子，块级元素
< div> 这意味着它的内容自动地开始一个新行，可定义文档中的分区或节。
可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 < div>，那么该标签的作用会变得更加有效。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

video标签添加视频
在HTML中，可以使用video标签添加视频，语法格式为“< video src=“视频地址”>文本< /video>”。

<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

</body>

xhj～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML前端：标签

html前端：标签：HTML 链接语法<a href="url">链接文本</a>href 属性描述了链接的目标。锚点：实例在HTML文档中插入ID:<a id="tips">有用的提示部分</a><a href="#tips">访问有用的提示部分</a><a href="https://www.runoob.com/html/html-links.html#tips">内联样式当特殊的样式
复制链接

扫一扫