来了老弟，前端入门-html

最新推荐文章于 2025-07-13 19:12:51 发布

小渝学长

最新推荐文章于 2025-07-13 19:12:51 发布

阅读量614

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_44548718/article/details/86537059

前端新手快速入门-html

一个网页的制作由很多部分一起来编写成的，有源代码(html)、css样式与js，
但html是占据绝对重要的地位的，少了它就是连一片白都看不到的了。

写法：编写html之前得先建立一个html文件(怎么建立html文件这里我就不说了哈)，然后在这个文件的body标签(在这里写)开始里面编写滴（如下图）在这里插入图片描述

html又是由许多元素与标签组成得,上图的class=”header” 中class为类，header为类名(即这个类的名称)编写于各个标签与元素内(有了类名才可选择到该元素或标签来编写css样式与js)。
下面给大家介绍一些常用的标签：(写那些标签用到的双引号一定是英文状态下的)

连接css的标签（具体看下面）

连接js的标签（具体看下面）

网站图标标签（具体代码看下面）
在这里插入图片描述
网站图标

文本框效果图（具体代码看下面）

连接css的标签  <link rel=”stylesheet”href=”（css文件）”> 【在<title></title>的下面写】
 

连接js的标签   <script type=”text/javescript” src=”js文件”></script>【要在body上写入哈】
 

<div class=””id=””></div>  【这是一个块级标签】
 

网站图标(即你所编写的这个网页的图标，也是在<title></title>的下面写)   <link rel="icon" href="imgars/636643005966073828.png">
   
锚标签 (俗称为a标签，而鼠标移到a标签上是会变成手型的(鼠标变手型通过css样式也是可以弄成的)，因截图截不到鼠标所以就不发效果图了哈)    <a href="#" class="ming">好机油</a>

文本框(可在里面书写文字、数字、字符串等，一般是一些表单表格用到)   <input type="text" name="" id="txtdemo" />
 

图片         （<img src="imgars/1529468471803.jpg" alt="" class="cdcd">）（<img src=”图片文件” alt=”图像无法载入时的替换文本”/>）

音频文件<embed height="0" width="0" src="音乐相册/miss/016 Marshmello  Anne-Marie--FRIENDS.mp3" type="">  （这是我最常用同时觉得最好用的）
<span></span> 行内标签（在页面上要把它变为块级元素才能并排在一起）
<ul></ul>       段落标签
<li></li>        无序列表(一般被<ul></ul>包裹着)
<b></b>        黑体字
<l></l>         斜体字
<u></u>       下划线
<em></em>     斜体字
<br>           换行
&nbsp;        空格
<h1></h1>~~<h6></h6>    文字大小是往后递减的

字符编码
∴  &there4;    ∞  &infin;   ⊕ &oplus;  Δ   &Delta;   Θ  &Theta;
©  &copy;      ®  &reg;      ™ &trade;

文章内容       <article></article> 
对话框           <dialog open></dialog>       
有序列表       <ol start="起始值"></ol>
无序列表        <ul></ul>         列表项    <li></li>
内联框架      <iframe src="URL"></iframe>   
居中标签      <center ></center>   


进度条
<meter value="0.8"></meter> 
<progress value="22" max="100"></progress> 
 
音频文件
<audio src="file:///E:/98.mp3" autoplay></audio>
autoplay	音频在就绪后马上播放。
controls	向用户显示音频控件（比如播放/暂停按钮）。
loop	每当音频结束时重新开始播放。
muted	音频输出为静音。
URL	规定音频文件的 URL。
<embed height="50" width="100"  src="horse.mp3">    
<object height="50" width="100"  data="horse.mp3"></object>

视频文件 MP4、WebM、Ogg
<video src="天空之城.mp4"></video>
属性与音频相似
poster   视频加载封面

表单标签
密码框<input type="password">    复选框 <input type="checkbox">
隐藏域   <input type="hidden">     文本域   <textarea></textarea>              
重置按扭 <input type="reset">        图片按扭<input type="image">     
按扭      <input type="button">      提交按扭<input type="submit">   

下拉框
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
//optgroup定义选项组
  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>
disabled="disabled"
 
单选框<input type="radio" name="">相连的单选框name值要相等
<label for="male">Male</label>//label 元素内点击文本，就会触发相应控件。
<input type="radio" name="sex" id="male" value="male">
文本框<input type="text" placeholder="文本框提示">
上传文件<input type="file" accept="image/gif"规定上传的文件类型>
   
其他属性      
autofocus                页面加载时 <input> 元素应该自动获得焦点
Checked               规定在页面加载时应该被预先选定的 
Maxlength           规定 <input> 元素中允许的最大字符数。
readonly               规定输入字段是只读的
表格标签
表格	描述


<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

下面是一个表格的基本写法与效果：

消费项目....	一月	二月
衣服	$241.10	$50.20

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
</table>

好了，这期先这样先?（其他后续发）