学习前端的第一步:HTML

来源:互联网 发布:国密算法实现 编辑:程序博客网 时间:2024/05/21 01:29

<!DOCTYPE html><html><head>    <title>test one</title>    <meta charset="utf-8">    <meta name="auther" content="Sunny">    <meta name="date" content="2016/9/8"></head><body style="font-family:微软雅黑">    <h1>网站第一标题</h1><nav>        <ul style="list-style-type:square">            <li><a href="http://ife.baidu.com/task/detail?taskId=1/">导航链接一</a></li>            <li><a href="http://www.baidu.com/">导航链接二</a>            <li><a href="http://runoob.com/">导航链接三</a></li>            <li><a href="#">导航链接四</a></li>              </ul></nav><article>    <header>            <h2>文章一级标题</h2>            <h2>文章二级标题</h2>            <p>文章作者,文章发表时间</p></header>        <p>九月里江南细雨纷纷扬扬,蔷薇花开满青石板的小巷,微风拂过古刹钟声敲响,,惊醒了鸟儿衔来杜鹃花床,        廊桥古亭倒影在太湖中央,<br/>        换行了<br/>        绵绵情丝缠绕淡淡桂花飘香,<a href="http://ife.baidu.com/">这里有一个链接到"http://ife.baidu.com/"</a>温酒一杯浅尝隔世梦一场,任多情人醉倒在花海水乡,        谁难舍一段尘缘落下诗句千行,谁望穿隔岸灯火欲将心事轻藏,怎料想转眼间月季浓夜初妆,        姹紫嫣红竟把世间美好都绽放,谁闻香不禁起舞引得彩蝶双双,谁一笔丹青跃然勾勒你的模样        穿越时间的墙你的美愈发盛放,这满城绝艳叫我怎能忘,天微凉露水浸湿兰花窗,胭脂红寻一抹浅笑唇边藏</p>        <p>九月里江南细雨纷纷扬扬,蔷薇花开满青石板的小巷,微风拂过古刹钟声敲响,,惊醒了鸟儿衔来杜鹃花床,        廊桥古亭倒影在太湖中央,<br/>        换行了<br/>        绵绵情丝缠绕淡淡桂花飘香,<a href="http://ife.baidu.com/">这里有一个链接到"http://ife.baidu.com/"</a>温酒一杯浅尝隔世梦一场,任多情人醉倒在花海水乡,        谁难舍一段尘缘落下诗句千行,谁望穿隔岸灯火欲将心事轻藏,怎料想转眼间月季浓夜初妆,        姹紫嫣红竟把世间美好都绽放,谁闻香不禁起舞引得彩蝶双双,谁一笔丹青跃然勾勒你的模样        穿越时间的墙你的美愈发盛放,这满城绝艳叫我怎能忘,天微凉露水浸湿兰花窗,胭脂红寻一抹浅笑唇边藏</p>    </article>    <article>        <header>              <h2>另一篇文章标题</h2>            <h2>文章二级标题</h2>            <p>文章作者,文章发表时间</p></header>        <p>九月里江南细雨纷纷扬扬,蔷薇花开满青石板的小巷,微风拂过古刹钟声敲响,,惊醒了鸟儿衔来杜鹃花床,        廊桥古亭倒影在太湖中央,<br/>        换行了<br/>        绵绵情丝缠绕淡淡桂花飘香,<a href="http://ife.baidu.com/">这里有一个链接到"http://ife.baidu.com/"</a>温酒一杯浅尝隔世梦一场,任多情人醉倒在花海水乡,        谁难舍一段尘缘落下诗句千行,谁望穿隔岸灯火欲将心事轻藏,怎料想转眼间月季浓夜初妆,        姹紫嫣红竟把世间美好都绽放,谁闻香不禁起舞引得彩蝶双双,谁一笔丹青跃然勾勒你的模样        穿越时间的墙你的美愈发盛放,这满城绝艳叫我怎能忘,天微凉露水浸湿兰花窗,胭脂红寻一抹浅笑唇边藏</p>        <p><img src="test1.jpg" width="1080" height="700" alt="这个是张非常好看的图片哦"></p>        <ul>        <li>列表项目一</li>    <li>列表项目二</li>    <li>列表项目三</li>    </ul><h2>图片</h2><ul style="list-style:none">        <li><p>好看的图片<br/>            <img src="test02.gif" width="218" height="151" alt="这是张动图哦,看不到太可惜了啦"></p></li>        <li><p>好看的图片<br/>        <img src="test02.gif" width="218" height="151" alt="这是张动图哦,看不到太可惜了啦"></p></li>        <li><p>好看的图片<br/>        <img src="test02.gif" width="218" height="151" alt="这是张动图哦,看不到太可惜了啦"></p></li>        <li><p>好看的图片<br/>        <img src="test02.gif" width="218" height="151" alt="这是张动图哦,看不到太可惜了啦"></p></li></ul></article><article>    <header>        <h2>最后一篇文章一级标题</h2>        <h2>文章二级标题</h2>        <p>文章作者 文章发表时间</p></header><ol type="1">        <li>排名1</li>    <li>排名2</li>    <li>排名3</li>    </ol>        <table border="1px">下面是一个表格,给表格加了一个border="1",好让看出一个表格            <th>表头</th>            <th>表头</th>            <th>表头</th>            <tr>                <td>表内容单元格</td>                <td>表内容单元格</td>                <td><a href="#">操作</a></td>            </tr>            <tr>                <td>表内容单元格</td>                <td>表内容单元格</td>                <td ><a href="#">操作</td>            </tr>    <tr>        <td>表内容单元格</td>                <td>表内容单元格</td>                <td><a href="#">操作</td>    </tr>    <tr>        <td>总计</td>    <td colspan="2">1000</td>    </tr>        </table>    <aside>            <h2>这里以后是一个侧栏,这是侧栏的标题</h2>        <h2>侧栏注册窗口标题</h2>        <form>请输入邮箱地址:            <input type="text" value="这是一个文本输入框"><br/>    <p>邮箱地址请按格式要求输入</p>    请输入密码:<input type="password"  value="这是一个文本输入框">    请重复输入密码:<input type="password"  value="这是一个文本输入框">        </form>    <p>密码为6~16位英文数字</p>            <span>性别:                <input type="radio" name="sex" value="男">男                <input type="radio" name="sex" value="女">女            </span>        <span>城市:                <select name="city">                <option value="1">北京</option>                <option value="2">杭州</option>                <option value="3">深圳</option>        <option value="4">上海</option>        </select>            </span>            <span>爱好:                <input type="checkbox" name="intresting" value="sports">运动                <input type="checkbox" name="intresting" value="article">艺术        <input type="checkbox" name="intresting" value="science">科学            </span>            <span>个人描述:                <textarea>这是一个多行输入,输入您的个人描述</textarea>                <input type="submit" value="提交">             </span>    </aside></article><footer>    <p>版权所有©</p></footer></body></html>

在百度前端技术学院看了第一个练习——HTML的练习,话说,我竟然写了一天,也是醉了,效果也就这样了

下面是写的代码,有点乱


0 0