学习前端的第一步:HTML

<!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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值