web前端学习笔记-HTML5入门

最新推荐文章于 2022-11-20 14:02:46 发布

weixin_52919803

最新推荐文章于 2022-11-20 14:02:46 发布

阅读量175

点赞数 1

分类专栏：笔记文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_52919803/article/details/110140289

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2020年11月24日更新学习前端的第二天

基本知识

1.基本框架

<!DOCTYPE html>（文档声明）
<html>（标签）
    <head>
        <title>标题</title>
    </head>（子标签）
    <body>
        <!--我是注释，不会在网页里显示，快捷键是ctrl+/。-->
        <h1>我是内容</h1>（子标签）
    </body>
</html>

2.属性：用于设置css，属性写在标签内

<h1 style=“color:red;text-align:center”>我是内容</h1>（子标签）

常用标签

1.div标签（division）：

块级标签，不能与其他元素并列

2.span标签：

行内元素不能设置宽度

3.a标签：示例

3a 网页链接：

<a href="http://www.baidu.com" title="我要去百度" target="_blank">文字链接</a>

3b 底部链接：

<a href="#bottom">到达页面底部</a>
<div id="bottom">这是底部，下面没有了</div>（设置标签唯一ID，可以被其他标签识别）

4.img标签：

引用图片（闭合标签）

<!-- ./表示相对路径 --><img src="./1.ipg" alt="图片已损坏">

5.h1-h6标签逐渐变小、p标签表示段落、br换行标签（闭合标签）

6.引用图片和文件时相对路径使用较多

7.字符实体：

<、>、空格等系统预留字符对应字符实体https://www.w3school.com.cn/html/html_entities.asp

8.meta标签：

        <meta charset = "UTF-8">
        <meta name = "keywords" content = "web前端 董甜甜">
        <meta name ="description" content="关于web前端学习的练习">
        <meta name = "author" content="董甜甜">

9.ul和ol标签（一般放在body里）：

无序列表和有序列表（unordered/ordered list）

               <!-- 无序列表标签选项前显示小圆点 -->
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ul>  
        <ol>
            <!-- 有序列表标签选项前显示依次序号 -->
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ol>

结果显示：在这里插入图片描述

10.不常用标签

<i>（斜体 表示术语、成语等 ）
<em> （斜体 表示被强调的文本）
<strong> （加粗倾斜 表示重要的文本）
<mark> （标黄加粗倾斜 表示被标记的/高亮显示的文本）
<cite> （斜体 表示作品的标题）
<dfn> （斜体 表示一个定义项目）

11.表格标签：

        <table border="1" width="500">
            <!-- 表格最外层 可设置边框 宽高 -->
            <tr>
                <!-- tr表示新起一行 th是表头-->
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr align="center">
                <td>1</td>
                <td>苹果手机</td>
                <td>RMB5555</td>
                <td>99</td>
            </tr>
        </table>

结果显示：（忽略颜色）在这里插入图片描述

12.表单标签：

常用：form、label、input

        <!-- 个人信息表单 -->
        <form>
            <div>
                <label for="username" >姓名</label>
                <input type="text" value="" name="username" placeholder="请输入姓名">
            </div>
            <div>
                <label for="phone">手机号</label>
                <input type="text" value="" name="phone" placeholder="请输入手机号">
            </div>
            <div>
                <label for="education">教育程度</label>
                <select name="education" id="">
                    <option value="请选择"></option>
                    <option value="小学">小学</option>
                    <option value="中学">中学</option>
                    <option value="大学">大学</option>
                    <option value="研究生">研究生</option>
                </select>    
            </div>
            <div>
                <label for="sex">性别</label>
                <input type="radio"  name="sex">男
                <input type="radio"  name="sex">女
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password"  placeholder="请输入密码">
            </div>
            <div>
                <label for="selfintroduction">自我介绍</label>
                <textarea cols="10" rows="10"></textarea>  
            </div>
            <div>
                <input type="button" value="普通按钮">
                <input type="submit" value="提交">
                <!-- 提交可以将数据传入form标签中action属性设置的网址 -->
                <input type="reset" value="重置">
            </div>
        </form>

结果显示：（忽略颜色）在这里插入图片描述

weixin_52919803

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记-HTML5入门

基本知识1.基本框架<!DOCTYPE html>（文档声明）<html>（标签） <head> <title>标题</title> </head>（子标签） <body>  <h1>我是内容</h1>（子标签） </body>
复制链接

扫一扫

专栏目录