HTML初识学习

最新推荐文章于 2026-01-01 17:32:06 发布

原创最新推荐文章于 2026-01-01 17:32:06 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

web page 专栏收录该内容

1 篇文章

订阅专栏

之前看了一个视频说：在未来没有所谓的android、ios开发者，只有web前端攻城狮。好吧，看看web前端的门面，浏览器所认识的语言html
兵无常式，水无常形。愿大家在这动荡的互联网江湖进退自如，游刃有余！

说说html的基本语言：标签

html :HyperText Markup Language(超文本标记语言)

一些基本的标记：(不区分大小写)

<!-- -->//html注释

一个标准的html文件大致的结构如下：

<!-- 表示一个html文件 -->
<!DOCTYPE html>

<HTML>
    <HEAD>
        <TITLE>这里写网页的标题</TITLE>
    </HEAD>
    <BODY>

        <!-- 这里写网页的主体-->
        <h1>一级标题</h1>

        <br/><!-- 换行符 -->
        <p></p><!--一个新的段落 -->
        <form></form><!--一个表单数据-->
        </hr><!--分割线-->
        <intput type=""></input><!-- 在表单中定义一个输入组件 type的属性有很多-->
        <a name=""></a><!-- 锚点 -->
        <a href=""></a><!--超链接-->
        <center></center><!--将内容居中-->
        <align> <!--将内容左对齐，居中或右对齐，或调整行距-->  
        <img src=""></img><!--图片加载-->
        <textarea></textarea><!--文本域-->
    <BODY>
</HTML>

最常用的标签就是这些。其实这些远远不止这些，HTML包含数十个标记，还有成百上千个标记属性。

字体样式元素标签

<b></b>呈现粗体文本效果
<strong></strong>与<b>的效果一致
<big></big>呈现大字号字体
<small></small>呈现小字号字体
<sub></sub>定义下标字
<sup></sup>定义上标字

书签，锚点

<!--锚的名称是由自己定义-->
<a name="anchor">this is a anchor</a>

<!--跳转至相应的锚-->
<a href="#anchor"></a>

HTML表格

<!--表格标签-->
<table>
    <!--行-->
    <tr>
    <!--列-->
    <td></td>```<td></td>
    </tr>
</table>

列表

1.无序列表格式

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

2.有序列表

<ol>
    <li>android</li>
    <li>ios</li>
</ol>

3.自定义列表

<dl>
    <!--自定义列表项-->
    <dt>Windows</dt>
        <!--自定义列表项定义--><dd>microsoft</dd>

    <dt>Mac</dt>
        <dd>Apple</dd>

</dl>

form表单

form表单用于提交数据至服务器后台

<!--action属性定义提交地址 method表示提交方式-->
<form action="http://www.xxx.xx/example/index.jsp" method="post/get">
<!--文本域-->
<input type="text" name="name"><br/>
<!--密码-->
<input type="password" name="psw">
<!--多选按钮-->
<input type="checkbox" name="check" checked="checked">
<!--单选按钮-->
<input type="radio" name="radio">
<!--隐藏域-->
<input type="hidden" name="hid" value="xxx">
<!--下拉菜单-->
<select name="sel" multiple="multiple" size="2">
<option value="iphone">Iphone</option>
<option value="samsung">SAMSUNG</option>
</select>
<!--多输入文本-->
<textarea name="comment" rows="60" cols="20"></textarea>
<!--重置-->
<input type="reset" value="reset">
<!--提交-->
<input type="submit" value="submit">

meta表示内容

<meta charset="utf-8"></mate>

<meta http-equiv="" content=""></meta>