Web前端开发-HTML基础

最新推荐文章于 2024-05-02 15:42:51 发布
最新推荐文章于 2024-05-02 15:42:51 发布
阅读量2.1k 收藏 25
点赞数 7
分类专栏： HTML/CSS 文章标签： HTML CSS Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viewerlin/article/details/80008650
版权

Web前端开发，自学笔记整理

HTML基础

1.基础环境

  • Google Chrome
  • HBuilder
  • Photoshop

2.HTML基础架构


<!--HTML注释，快捷方式 command+/ （Windows：control+/）-->
<!--document type html-->
<!DOCTYPE html>

<!--网页正式内容-->
<html>
    <!--头部-->
    <head>
        <!--编码类型-->
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>

    <!--身体-->
    <body>
        Hello world!
    </body>
</html>

3.字符集（编码类型）

  • UTF-8: 国际通用字库
  • GB2312(GBK): 中国字库
  • UTF-8(一个汉字3个字节)
  • GB2312(一个汉字2个字节)
  • 计算机不能之间存储汉字，都是存储编码

4.常用标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用标签</title>
    </head>
    <body>
        <!--1.标题标签-->
        <h1>标题</h1>
        <h2>标题</h2>
        <h3>标题</h3>
        <h4>标题</h4>
        <h5>标题</h5>
        <h6>标题</h6>

        <!--2.段落标签-->
        <h2>春晓</h2>
        <p>春眠不觉晓，</p>
        <p>处处闻啼鸟。</p>
        <p>夜来风雨声，</p>
        <p>花落知多少。</p>

        <!--3.加粗标签-->
        <p>对比文字</p>
        <strong>测试</strong>
        <b>测试</b>

        <!--4.倾斜标签-->
        <i>谷歌</i>
        <em>www.google.com</em>

        <!--5.下划线标签-->
        <p> God help <u>those</u> who help <u>themselves</u>. </p>

        <!--6.上标注-->
        <p>
            2<sup>3</sup>=8
        </p>

        <!--7.下标注-->
        <p>
            H<sub>2</sub>O 水
        </p>

        <!--8.无序列表-->
        <ul>
            <li>News1</li>
            <li>News2</li>
            <li>News3</li>
        </ul>

        <!--9.有序列表 属性名=属性值 
        type="a" //序号类型 1(默认),a,A,i,I
        start="3"//序号起始位置-->
        <ol>
            <li>News1</li>
            <li>News2</li>
            <li>News3</li>
        </ol>
        <ol type="a">
            <li>News1</li>
            <li>News2</li>
            <li>News3</li>
        </ol>
        <ol type="a" start="3">
            <li>News1</li>
            <li>News2</li>
            <li>News3</li>
        </ol>

        <!--10.自定义列表-->
        <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
        </dl>

        <!--11.图片
            src="url"网络链接
            或src="path"本地路径
        -->
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524137188339&di=9bfcd71b9d04cd4db12359ce28a1aaa8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014263554468cc0000019ae9262bb8.jpg%402o.jpg" />
        <img src="dishu1.png" />
        <br />

        <!--12.超链接
            href="url"网络链接
            或href="path"本地路径
            target="打开方式" //_self当前窗口（默认），_blank新建窗口
        -->
        <a href="https:www.baidu.com">百度一下</a>
        <br />
        <a href="01-test.html" target="_blank">HTML基础架构</a>
        <br />

        <!--特殊字符-->
        &nbsp;空格 <br />强制换行
        <p>你&nbsp;&nbsp;可以不聪明,<br />但不可以不努力。</p> 
        <hr /> 分割线
        <p>
            &copy; 版权标签
        </p>
        <p>
            &lt;前端开发&gt;  &lt;=左尖括号；右尖括号=&gt;
        </p>
    </body>
</html>

5.表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <!--
            3行4列: 每行4个单元格（有三行）
            tr: 行
            td: 单元格
            width: 表格宽度（像素px，可以省略不写）
            height: 表格高度
            border: 表格边框
            cellspacing: 单元格间距
            cellpadding: 调整内容的位置
            align: 水平对齐方式（left，center，right）
                加到table里表示整个表格水平方向位置
                加到tr里表示整一行的对齐方式
                加到td里表示对应单元格的对齐方式
            valign: 垂直方向（只能用于tr/td，top/middle/bottom）
            bordercolor: 边框颜色
            colspan: 合并行单元格
            rowspan: 合并列单元格

        -->
        <table width="300" height="200" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="blue">
            <!--第一行-->
            <tr align="center">
                <td>1</td>
                <td colspan="2" align="center">2</td> <!--合并行单元格 colspan="" 合并的单元格数量-->
                <!--<td>3</td>-->
                <td rowspan="2">4</td>  <!--合并列单元格 rowspan="" 合并的单元格数量-->
            </tr>
            <!--第二行-->
            <tr valign="bottom">
                <td align="center">1</td>
                <td>2</td>
                <td>3</td>
                <!--<td>4</td>-->
            </tr>
            <!--第三行-->
            <tr>
                <td valign="bottom" colspan="3">1</td>
                <!--<td>2</td>
                <td>3</td>-->
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

6.表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <!--
            表单域：form
                    name: 表单域名称
                    method: 请求方式 get/post
                    action: 提交URL
        -->
        <form name="test" method="get" action="https:www.baidu.com">
            <!--
            1.文本域
                type: 类型
                placeholder: 提示文本
                value: 输入框中的初始内容
            -->
            <p>
                账号: <input type="text" placeholder="手机号/QQ号" value="123456" />
            </p>
            <!--
            2.密码输入框
                type: type="password"
            -->
            <p>
                密码: <input type="password" placeholder="6位密码" />
            </p>
            <!--
            3.单选框
                type="radio"
                同一组中的只能选择一个
                name: 控制哪一组
                checked: 默认选中的
            -->
            <p>
                <input type="radio" name="sex" checked="checked" />男
                <input type="radio" name="sex"/>女
                <input type="radio" name="sex"/>中性
            </p>
            <!--
            4.多选框
                type="checkbox"
                name: 控制哪一组
                checked: 默认选中的
            -->
            <p>
                <input type="checkbox" name="like" />睡觉
                <input type="checkbox" name="like" checked="checked" />吃饭
                <input type="checkbox" name="like" />打豆豆
            </p>
            <!--
            5.下拉菜单  
            -->
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
            </select>
            <!--
            6.按钮
                value: 按钮内容
            -->
            <p>
                <input type="button" value="按钮1"/>
                <input type="button" value="按钮2"/>
            </p>
            <!--
            7.提交按钮
                提交即提交到表单域action中填写的地址
            -->
            <p>
                <input type="submit" value="注册" />
            </p>
            <!--
            8.重置按钮
                重置该按钮对应的表单域中
            -->
            <p>
                <input type="reset" value="重置" />
            </p>
        </form>
    </body>
</html>
viewerlin
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是web前端开发？web前端学习指导
qq_41800874的博客
06-20 710
Web前端开发有一个叫做自由和任意的工作状态，但它必须是辛苦的和累的，与其他行业相比，前端工程师更可能具有自由、乐趣和专家头衔的社会角色。如果利益的驱使使你成为事业，那就能够坚持整个人生，这样从鸡到菲尼克斯，从白到伟大的上帝是一件自然的事。学习网络前端开发，你会发现，当你的美丽经历了时间的冲刷，体验已经逐渐安定下来，并成为你生命的宝贵价值。切入点：什么是Web前端开发？Web前端开发是近年来的一个...
Web前端开发主要做什么
pupu0416的博客
07-24 5439
Web前端开发主要做什么？朗沃小刘小编今天来谈谈web前端开发主要做什么？web前端工程师，做的工作与网站前/后台系统的页面相关，使用到的主要技术包括：HTML、CSS、JavaScript。现代web前端开发已经不能像传统web开发已经简单的描述成切图、CSS、JS。在新的HTML5规范中，加入很多新的特性，这样就对web前端工程师有了更高的要求，比如数据库操作，使用CANCVS、CSS3绘图。 在web前端这个岗位兴起之前，HTML+CSS的工作是被视觉人员所承担的，而JS这部分则是由后端完成的.
Web前端开发技术概述
EverdayForCode的博客
05-08 3174
Web前端开发技术概述 前端开发 学习笔记
前端Web开发基础知识
2301_77599154的博客
05-02 1022
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
前端开发流程
weixin_34321977的博客
05-04 934
一. 需求 1.1 评审 召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工 明确需求目的，考虑当前需求设计是否可满足目的 整理流程中如果涉及的其他人员，则召集商讨 如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审 1.2 注意事项 业务流程同步：评审后重新梳理流程，存在疑问处及时找产品...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4877
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
WEB前端开发-案例汇总(81例).zip
05-08
《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
web前端开发-滕王阁
03-15
在IT行业中，Web前端开发是构建互联网应用的重要组成部分，它主要关注用户与网站或应用程序交互的部分。"滕王阁"这个项目可能是一个实战教程或案例，用于教授和展示Web前端开发的技术和技巧。下面，我们将深入探讨...
web前端开发-微博发布
03-15
在Web前端开发中，"微博发布"这一主题涵盖了多个关键知识点，主要涉及到用户交互、数据传输、页面动态更新以及响应式设计等方面。以下是对这些关键点的详细解释： 1. **HTML与CSS基础**：HTML（HyperText Markup ...
web前端开发-软件（HBuilderX）和项目代码
最新发布
06-24
HBuilderX是一款流行的Web前端开发工具，它提供了丰富的功能，包括HTML、CSS、JavaScript的编写和调试，以及Vue.js、React.js等现代前端框架的支持。 【描述分析】 描述简单地重复了标题，强调了我们将在HBuilderX...
WEB前端开发-案例源码汇总（适合初学者）.rar
11-26
【标题】"WEB前端开发-案例源码汇总（适合初学者）.rar"是一个针对初学者的前端开发学习资源包，包含了多个实际的WEB前端开发案例的源代码。这个压缩包旨在帮助初学者通过实例来理解和掌握前端开发的基础知识。 ...
WEB前端-案例汇总
11-08
WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。
网站前端html
01-10
自用响应式网站前端开发代码，下载即用。一般公司主站的样式。
web前端基础知识
早睡早起长头发的博客
07-11 6809
一、网页、静态网页、动态网页 二、网页名词解释 三、Web标准 四、Web页面的组成
前端代码标准最佳实践：HTML篇
08-28 244
Web前端代码中，HTML是根本，CSS和JavaScript也是围绕着既有的HTML结构来构建，所以良好的HTML代码结构，除了提高了HTML代码的可读性，可维护性和执行性能之外，也可以让相对应的CSS和JavaScript代码更好的构建。距前面两篇探讨JavaScript（前端代码标准最佳实践：JavaScript篇）和CSS（前端代码标准最佳实践：CSS篇）之后，我们今天来探讨We...
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
Web前端基础
m0_64100645的博客
07-20 469
定义列表2.定义专业术语或名词3.对名词进行解释和描述注意运用于列表项添加标题和对标题进行描述的内容超文本标记语言层叠式样式表网页脚本语言
从零学前端第一讲：前端开发是什么？给初学者有什么建议？
learning_web的博客
05-14 2192
【从零学前端第一讲：前端开发是什么？给初学者有什么建议？】 初识前端 1、前端开发是什么？ 2、前端开发有前途吗？ 3、前端开发哪里学？ 4、前端发展 5、对初学者的建议 6、学习html入门 7、学习css入门 1.前端开发是什么？ 前端开发是从网页制作演变而来。 早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。 随着互联网的发展，现代网页更佳美观，交互效果显著，功能...
网站前端开发必会基础知识有哪些？
xuezhangmen的博客
03-22 2684
自己工作做得好好的，怎么非要去搞前端？” 很多人离职的时候，可能印象最深的就是爸妈每天说的这句话。起因很简单，就是自己辞了爸妈眼中的“铁饭碗”。 他也是如此，毅然辞去了一眼望到头的工作，0基础转行前端到如今拿下XX游戏公司Offer，今天把学习前端开发必会的基础知识分享给大家，希望对有转行做前端想法的小伙伴一点参考。 Web前端开发主要由HTML、CSS、JavaScript三大要素组成，由于企业需求的增加，前端开发技术的三要素也成现今的HTML5、CSS3、jQuery。那么，作为一名网站前端开发者，你要
前端开发与实践- WEB前端开发环境与HTML基础.pptx
10-29
前端开发与实践

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值