【2020092701】前端开发总结1-html

选择编辑器：sublime

sublime快捷键：

新建：1.双击空白栏目处

　　　2.ctrl+N

另存为：ctrl+shift+s

模板存储及快速调用：tools-developer-new snippet

将第三行内容替换为自己想要的模板，第六行的注释去掉，将hello改为想要存储的名字，然后另存为，调用的时候直接在编辑器中输入名字，在点击tab键。

 

 

要在浏览器中写一个页面：

<!doctype html>——告诉浏览器要写代码啦
<html>——固定格式，有结束标记
        <head>
                <meta charset="utf-8">——是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作
                <title>标题</title>——浏览器页面的标题
        </head>
        <body>
                <div>——分行
                        用户名：
                        <input type="text">——文本输入
                 </div>
                 <div>
                        密码：
                        <input type="password">——密码输入
                  </div>
                  <div>
                        选项1
                            <input type="checkbox">——多选框
                        选项2
                            <input type="checkbox">
                   </div>
                   <div>
                            单选
                            <input type="radio">——单选框
                            单选
                            <input type="color">——颜色选择器
                    </div>
                    <button>按钮</button>——按钮1
                    <input type="button" value="按钮">——按钮2
                    <p>我是段落。</p>——段落，间距大
　　　　　　　　　　　　<p>我是段落。</p>
　　　　</body> 
</html>

 

<!doctype html>
<html>
    <head>
        <title>zx</title>
    </head>
    <body>
        <div>my name is XX</div>
        <div>I'm 12 years old</div>
        <img src='C:\Users\Administrator\Desktop\beimian.png'>——插入图片
        <a href="https://www.baidu.com" target="_blank">百度
        </a>——插入链接（其中写了_blank代表新开页面）
        <a href="https://www.jd.com">——插入链接
            <img src="C:\Users\Administrator\Desktop\beimian.png">
        </a>
        <ul>——无序列显示
            <li>我的名字叫1</li>——其中<li>与<ul>配对用
            <li>adasda</li>
            <li>asdafa</li>
            <li> 
                <a href="https://www.jd.com">
                    <img src="C:\Users\Administrator\Desktop\beimian.png">
                </a>
            </li>    
        </ul>
        <ol>——有序列显示
            <li>我的名字叫1</li>
            <li>adasda</li>
            <li>asdafa</li>
        </ol>
    </body>
</html>

 

posted @ 2020-09-27 14:13  hi，好久不见  阅读(95)  评论(0)  编辑  收藏  举报