前端基础知识总结（一）（2）

最新推荐文章于 2023-07-07 00:19:43 发布

-Hao.ye！

最新推荐文章于 2023-07-07 00:19:43 发布

阅读量362

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45433013/article/details/110874824

版权

  **昊哥前端知识基本总结**

今天我们继续说说HTML其他基本知识！
首先给大家推荐一个本人喜欢用的编辑器：Visual Studio Code。
这个编辑器用起来特别的人性化方便便捷，适合大部分初学者使用。点击一下就可以下载：Visual Studio Code
编辑器怎么样使用就不在这详细讲了，大家可以看下这个视频：VSCoder入门视频
1.HTML主体该怎么编写？
先看一下主体的大概样子：

<body>
 <h1>冷风吹 吹我腿</h1>
 <h2>TM冻我的脚后跟<</h2>
  <span><P>一股冷风 屁股冻 梆硬</p></span>
  <span><P>我匆匆的走 用手擦着我滴大鼻腾</p></span>
   <span><P>这个s东北 的天 真冷</p></span>
 <div>
    <ul>
        <li><img src=""></li>
        <li>学好IT</li>
        <li>改变自己</li>
    </ul>
</div>
</body>
</html>

主体就是用来写标签的，接下来说一下标签的使用和含义。
主要标签如下：
1.标题标签是通过 < h1>- < h3>标签来定义的。

<h1> Hello Wrold </h1>
<h2> Hello China </h2>
<h3> Hello IT </h3>

实现效果如下：

2.< p>段落是通过标签 < p> 来定义的。


<p>Hello Wrold</p>
<p>Hello China</p>

实现效果如下：

3.HTML 链接是通过标签 < a> 来定义的，href是用来定义网址。


<a href="https://www.baidu.com">这是一个链接</a>

实现效果如下：
在这里插入图片描述
4.HTML 图像是通过标签 < img> 来定义的.
src是指图像所在地址，alt 属性用来为图像定义一串预备的可替换的文本。

<img src="photo/怪物猎人世界.jpg" alt="怪物猎人世界">

实现效果如下：
在这里插入图片描述
5.HTML 音频是通过标签 < audio> 来定义的。目前，< audio>元素支持的3种文件格式：MP3、Wav、Ogg。

<audio scr="..." controls/>

实现效果如下：
在这里插入图片描述属性：
< audio> 标签支持 HTML 的全局属性，也支持 HTML 的事件属性。

6.HTML 视频是通过标签 < video> 来定义的，比如电影片段或其他视频流。目前，< video> 元素支持三种视频格式：MP4、WebM、Ogg。

<video scr="..." controls/>

实现效果如下：

在这里插入图片描述属性：
< video> 标签支持 HTML 的全局属性，也支持 HTML 的事件属性。

HTML 文本格式化标签

文本标签

HTML 表格

表格由 < table> 标签来定义。表格的表头使用 < th>标签进行定义,每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义)。字母指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


<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>

实现效果如下：

在这里插入图片描述

HTML颜色

HTML 颜色由红色、绿色、蓝色混合而成。
颜色值：HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
在这里插入图片描述

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

属性实例
HTML 链接由 < a>标签定义。链接的地址在 href 属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

下面列出了适用于大多数 HTML 元素的属性：
在这里插入图片描述

HTML 列表

HTML 支持有序、无序和定义列表:
在这里插入图片描述 HTML无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用< ul> 标签，代码如下：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

实现效果如下：
在这里插入图片描述

HTML有序列表：有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于< ol> 标签。每个列表项始于 < li> 标签，列表项使用数字来标记，代码如下：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

实现效果如下：
在这里插入图片描述
HTML 自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < dl> 标签开始，每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd>开始,代码如下：

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

实现效果如下：
在这里插入图片描述
注意事项 - 有用提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 块级元素

大多数 HTML 元素被定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML< div>元素

HTML < div>元素是块级元素，它可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用，< div>元素可用于对大的内容块设置样式属性。
< div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table>元素的作用是显示表格化的数据。

HTML < span> 元素

HTML < span> 元素是内联元素，可用作文本的容器

< span> 元素也没有特定的含义。

当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。

HTML表单

这是一个重点，请你们仔细学习。
一 . 什么是表单？
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
先看下大概的代码样子：

<form>
   	<table width="600px" bgcolor="#f2f2f2" align="center" >
   	   	<tr>
   	   		<td align="right">姓名: </td>
   	   		<td align="left"><input type="text" name="username" size="25" maxlength="8" 
   	   		placeholder="请输入姓名"  required/></td>
   	   	</tr>
   	   	<tr>
            <td align="right">邮箱: </td>
   	   		<td align="left"><input type="email" name="email" value="@qq.com" required></td>
   	   		<tr>
   	   			<td align="right">密码：</td>
   	   			<td align="left"><input type="password" name="paw" size="25" maxlength="8" placeholder="请你输入密码" required/></td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">确认密码：</td>
   	   			<td align="left"><input type="password" name="paw" size="25" maxlength="8" placeholder="请再输入密码" required /></td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">上传照片：</td>
   	   			<td align="left"><input type="file" name="file" required/></td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">性别：</td>
   	   			<td align="left">男<input type="radio" name="sex" value="man" required />
                    女<input type="radio" name="sex" value="woman" required/>
                    保密<input type="radio" name="sex" value="bm" required/>
   	   			</td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">城市：</td>
   	   		   <td align="left">
   	   		   	<select name="city" required> 
   	   		   	<optgroup label="华北">
   	   		   	 <option value="qxz" selected>--请选择--</option>	
   	   		   	 <option value="bj">北京市</option>
   	   		   	 <option value="sh">上海市</option>
   	   		   	 <option value="cq">重庆市</option>
   	   		   	 <option value="tj">天津市</option>
   	   		   	 <option value="fj">福建市</option>
   	   		   	 <option value="cs">长沙市</option>
   	   		   	</optgroup>
   	   		   	<optgroup label="华东">
   	   		   	 <option value="wh">武汉市</option>
   	   		   	 <option value="ah">安徽市</option> 
   	   		   	 <option value="dl">大连市</option>
   	   		   	 <option value="sy">沈阳市</option>
   	   		   	 <option value="xm">厦门市</option>
   	   		   	 <option value="xg">香港特别行政区</option>
   	   		   	 <option value="am">澳门特别行政区</option>
   	   		   	 </optgroup>
   	   		   	</select>
   	   		   </td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">简介</td>
   	   			<td align="left"><textarea name="jj" rows="10" cols="50" placeholder="请输入个人介绍" id="mark" required></textarea></td>
   	   		</tr>
   	   		   
   	   		
   	   		<tr>
   	   			<td align="right">爱好：</td>
   	   			<td align="left">读书<input type="checkbox" name="dx1" value="read" required/>
                    跳舞<input type="checkbox" name="dx1" value="dance" required/>
                    唱歌<input type="checkbox" name="dx1" value="sing" required/>
   	   			</td>
   	   		</tr>
   	   		<tr>
   	   			<td align="right">爱好的运动：</td>
   	   			<td align="left">跑步<input type="checkbox" name="dx2" value="1" required/>
                    球类项目<input type="checkbox" name="dx2" value="2" required/>
                    跳绳<input type="checkbox" name="dx2" value="3" required/>
                     游泳<input type="checkbox" name="dx2" value="4" required/>
                </td>
				  </tr>
			   <tr>
					  <td align="right ">日期 ：</td>
					  <td align="left"><input type="date" name="date" required></td>
				  </tr>
				  
            <tr>
   	   			<td colspan="2" align="center"><input type="button" value="来点我" name="button"  required/>
                    <input type="submit" value="提交" name="submit"  required/>
                    <input type="reset" value="重置"  name="reset" required />
            </td>
				
   	  
</table>
</from>

实现效果如下：
在这里插入图片描述

表单使用表单标签 < from>来设置

<form>
.
input 元素
.
</form>

二、HTML 表单 - 输入元素
数情况下被用到的表单标签是输入标签（< input >）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
1.文本域
文本域通过< input type = “text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

实现效果如下：
在这里插入图片描述注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

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

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

实现代码如下：
在这里插入图片描述注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3.单选按钮
< input type = “radio”> 标签定义了表单单选框选项。

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

实现效果如下：

在这里插入图片描述
4.复选框
< input type = “checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

实现效果如下：
在这里插入图片描述
5.提交按钮
< input type = “submit”> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

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

实现效果如下：
在这里插入图片描述 HTML 表单标签

HTML5新标签:
在这里插入图片描述

-Hao.ye！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识总结（一）（2）

**昊哥前端知识基本总结**今天我们继续说说HTML其他基本知识！首先给大家推荐一个本人喜欢用的编辑器：Visual Studio Code。这个编辑器用起来特别的人性化方便便捷，适合大部分初学者使用。点击网址就可以下载：Visual Studio Code编辑器怎么样使用就不在这详细讲了，大家可以看下这个视频：VSCoder入门视频1.HTML主体该怎么编写？先看一下主体的大概样子：<body> <h1></h1&g...
复制链接

扫一扫