前端学习笔记之1 基础语法及标签

引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力, 等学会点皮毛之后打算接触一下React Native; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是简单代码; 很基础的东西, 看到的小伙伴酌情略过吧^_^

编辑器选择 : 我用的Mac系统, 用的破解版的WebStorm, 奉上破解教程; 亲测可用

1. 基础标签 + 基础语法


<html>

<head>
    
    <meta charset="UTF-8">
    
    <title>常用标签title>
head>
<body>
    hello world! 你好, 世界!
    
    <h1>我是h1标题h1>
    <h2>我是h2标题h2>
    <h3>我是h3标题h3>
    <h4>我是h4标题h4>
    <h5>我是h5标题h5>
    <h6>我是h6标题h6>
    
    <br>
    
    <input><br>
    <input placeholder="提示文字"><br>
    <input value="默认值"><br>
    <input type="color"><br>
    <input type="date"><br>
    <input type="file"><br>
    <input type="checkbox"><br>
    <input type="radio"><br>
    <input type="button"><br>
    
    <p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落p>
    <p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落p>
    <p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落p>
    <p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落p>
    
    
    
    
    <img src="http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg" alt="提示文字" width="100">
    <img src="image/img_1.jpg" alt="工程中" width="100"><br>
    
    <a href="#">我是超链接 调到头部a><br>
    <a href="http://baidu.com">我是超链接, 当前窗口跳转到其他a><br>
    <a href="http://baidu.com" target="_blank">我是超链接, 开新页面跳转a><br>
    
    <ul>
        <li>我是无序列表li>
        <li>我是无序列表li>
        <li>我是无序列表li>
        <li>我是无序列表li>
    ul>
    
    <hr>
    
    <div>
        我是div
        <h1>哈哈哈哈哈哈哈h1>
    div>
    <div>我是divdiv>
    <div>我是divdiv>
body>
html>

2. HTML5 新增标签


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

    <progress max="100" value="30">progress>

    

    
    <audio src="Music/薛之谦%20-%20你还要我怎样.mp3" controls="controls">audio>
    
    <video src="" controls="controls">video>

body>
html>

3. HTML5新增属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国务院港澳事务办公室发言人就香港特别行政区第五任行政长官选举结果发表谈话title>
    <style>
        body{
            text-align: center;
        }
    style>
head>
<body>

    

    
    <article>
        
        <header>
            <h1>国务院港澳事务办公室发言人就香港特别行政区第五任行政长官选举结果发表谈话h1>
            <p>2017-03-26 15:18:12   来源: 新华社p>
            <img src="image/img_1.jpg" width="400">

        header>
        
        <section>
            <h3>中央政府驻港联络办负责人就林郑月娥在第五任行政长官选举中当选发表谈话h3>
            <p>中央政府驻港联络办负责人26日就林郑月娥在香港特别行政区第五任行政长官选举中当选发表谈话。p>
            <p>该负责人表示,我们高兴地看到,这次行政长官选举严格按照香港基本法、全国人大常委会有关决定和香港特别行政区有关法律进行,体现了公开、公平、公正的原则,选举过程也比较顺利。p>
        section>
        <section>
            <h3>梁振英就香港特区第五任行政长官选举结果发表声明h3>
            <p>根据香港特区行政长官选举条例,在有三名候选人竞争的情况下,如果有任何候选人在第一轮投票中取得超过600张有效选票即当选。否则,取得最高票数和第二高票数的候选人将进入单一轮投票,其他候选人被淘汰;如在第一轮投票中出现同票情况,则需进入下一轮投票,直至有一名候选人取得超过600张有效选票,或投出两名候选人进入单一轮投票。p>
            <p>选举的落幕,正意味着新征途的开始。如何在未来五年广泛凝聚共识,全面准确贯彻“一国两制”方针和基本法,在保证香港繁荣稳定的基础上实现更好的发展,是香港社会的期盼所在,更是林郑月娥和香港特区新一届政府最为重要的历史责任。p>
        section>
        
        <footer>
            <img src="image/img_footer.png">
        footer>

    article>



body>
html>

你可能感兴趣的:(Learning,前端学习笔记)