前端学习记录1-HTML基础

三窗

已于 2024-04-29 13:04:04 修改

阅读量158

点赞数 2

文章标签：学习

于 2024-04-26 17:56:50 首次发布

本文链接：https://blog.csdn.net/weixin_53640414/article/details/138209273

版权

HTML标签

查找链接：HTML 语言代码参考手册 | 菜鸟教程 (runoob.com)

标题：ｈ１～ｈ6

段内换行：br

段内分组：span

段落：p

预留格式：pre

水平线：hr

空格：&nbsp

超链接：<a href=“网址”>文字或图片 </a>

链接到本站点其他网页<a href= "news.htm!"> 新闻 </a>
链接到其他站点<a href= “http://www.baidu.com"> 百度 </a>
虚拟超链接<a href=“#”>版块2</a>

图片：

<img src="w3school.gif" alt="W3C">
相对路径上一级表达.. src="../logo.gif"

上角标：

无序列表：<ul> <li></li></ul>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JAVASCRIPT</li>

</ul>

有序列表:<ol> <li></li></ol>

自定义列表：<dl><dt></dl>

表格：<table><tr><td></td></tr></table>

注释标签：HTML  注释标签

快捷敲代码方式：

比如h2+b;a*3

ul>li*3

p{段落内容}

img[标签内容]

lore拓展文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>WEB前端开发</h1>
    <h2>HTML</h2>
    <p>超文本标记语言，用于构建网页结构</p>
    <hr />

    <h2>CSS</h2>
    <p>层叠样式表，用于构建网页样式</p>
    <hr>

    <h2>JS</h2>
    <p><a href="http://www.baidu.com">JAVASCRIPT，脚本语言，用于构建网页行为 </a>JAVA</p>
</body>
</html>

表单表格代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="将进酒">
        dddd
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ul>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ol>
        <table border="1">
            <tr>
                <th></th> <th>学生数量</th>  <th>平均成绩</th> 
            </tr>
            <tr>
                <td>一班</td> <td>30</td> <td>89</td>
            </tr>
            <tr>    
                <td>二班</td> <td>35</td> <td>85</td>
            </tr>

        </table>
        <br/>
        <form action="数据处理网页">
            <!--action是后端处理的页面  -->
            账户：
            <input type="text" value="请输入账户"   name="userName"/> <!--name是后端处理时候要读取的ID  -->
            <input type="submit" value="提交~" name="submiting"/> 
            <input type="reset" value="清空" name="submiting"/> <!--清空重置 -->
            <br/>
            密码：<input type="password"/>
            <br/>
            性别：
            男<input type="radio" value="boy" name="gender" checked="checked" /><!--radio是单选，checked是默认选择-->
            女<input type="radio" value="girl" name="gender"  />
            <br/>
            爱好：
            钢琴<input type="checkbox" value="1"> 
            <br/>  
            <select>
                <option>选项1</option>
                <option selected="selected">选项2</option>
 
            </select>
            <br/> 
            <textarea rows="10" cols="30">文本</textarea> 



        </form>
    </div>
    
</body>
</html>

语义化标签：

强调

斜体，无语义

重点强调

粗体，无语义