前端HTML5的基本语法操作详解

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

1.操作环境：在pycharm中建立HTML文件直接运行有补齐的功能

2.基本语法及常用标签总结

（1）模版HTML ：建立HTML文件时即可自动生成模版

<!DOCTYPE html>
/*声明html版本是html5*/
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书的详情信息</title>     #网页的标题
</head>
<body>

（2）文本标签: h1-h6

<h1>图书管理一级标题</h1>
<h2>图书管理一级标题</h2>
<h3>图书管理一级标题</h3>
<h4>图书管理一级标题</h4>
<h5>图书管理一级标题</h5>
<h6>图书管理一级标题</h6>

（3）链接标签

 超链接标签 <a href="https://www.baidu.com">百度一下</a>
 图片标签 <img width="100px" height="100px" src="https://tupian.sioe.cn/b/bing-home- 
          image/pic/20140801.jpg">
 图片超链接: <a href="http://www.bing.com"><img width="100px" height="100px"
                      src="https://tupian.sioe.cn/b/bing-home- 
                      image/pic/20140801.jpg"></a>

（4）表格标签

<table border="1">
    /*创建5行(tr table row)3列(td)的表格信息*/
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>成绩</td>
    </tr>
    <tr>
        <td>fentiao</td>
        <td>10</td>
        <td>100</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>98</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>29</td>
        <td>100</td>
    </tr>
    <tr>
        <td>Lily</td>
        <td>19</td>
        <td>99</td>
    </tr>

</table>

（5）无序列表

<ul>
    <li>首页</li>
    <li>Python</li>
    <li>Java</li>
</ul>

（6）表单标签

<form>
    用户名: <input type="text"><br/>
    密码: <input type="password"><br/>
    性别: 男<input type="radio" value="1" name="gender">
    女<input type="radio" value="2" name="gender"><br/>
    <input type="submit" value="登录">
</form>
*/


<div style="width: 100px; height: 200px; border: 1px solid red">
    div标签
</div>

<span style="color: rebeccapurple; font-size: 20px">
    span标签
</span>



</body>
</html

注意HTML的基本学习相对简单可参考https://www.runoob.com/html/html-tutorial.html 学习

了解完整的前端开发应学习 HTML+CSS+JavaScript

前端HTML5的基本语法操作详解

猜你喜欢