首页 > Web开发 > 详细

前端学习第一课——HTML

时间:2020-11-28 19:40:41      阅读:29      评论:0      收藏:0      [点我收藏+]

学习网络前端知识的第一课,使用了一些HTML常用标签,并简单应用了下CSS主题设置。来记录下自己的第一段html代码。


“1.html”中的代码:

<!doctype html>
<html>
    <head>
        <title>第一个html页面</title>
        <icon>...</icon>
        <link rel="stylesheet" type="text/css" href="1.css">
        <style>
            ul,ol {
                list-style-type: none;
            }
        </style>
    <body>
        <h1 id="tit-one">一级标题:一起进步吧!</h1>
        <h2>二级标题</h2>
        <h3>三级标题...</h3>
        <h6>六级标题,小到看不到。</h6>
        <p>这是一个段落。</p><br>
        <strong>强调文本</strong>
        <hr><!--一条华丽丽的分割线-->
        <del>这是一条被删除的文本。</del>
        <b>Bold text黑体文本</b><br>
        <i>italic text美丽的意大利斜体</i><br>
        <em>Emphasized text是不是和意大利体很像</em><br>
        <small>小小小小</small><br>
        <ins>这是一段插入的文本</ins><br>
        <q>引用一句话?</q><br>
        <img src="" width="" height="" alt="这是图片加载失败时的替代文字"/><!--后加斜杠表单标记--><br>
        <a href="chaoliajie" target="-blank"><img src=""/></a><br>
        <a href="mailto:1051434511@qq.com">Email to US</a><br>
        <a href="#faq">常见问题</a><br>
        <a href="#bottom-section">去底部,好像没有用。</a><br>
        <ul>
            <li>“unorder list”无序列表</li>
            <li>
                <ol>
                    <li>"order list"有序列表中的第一条list item </li>
                    <li>list item 2</li>
                </ol>
            </li>
        </ul><br>
        <form action="/course/reg.do" method="post" enctype="multipart/form-data">
            <p>姓名:<input type="text"/></p>
            <p>简介:<textarea></textarea></p>
            <P>简历附件:<input type="file"/></P>
            <p><input type="submit" value="报名提交"/></p>
        </form><br>
        <footer>
            <a href="#">回到顶部</a><br>
            <a href="#tit-one">一级标题</a>
        </footer>
    </body>
	</html>

“1.css”中的代码:

a {
    text-decoration: none;
    color: red;
    background-color:yellow; 
}
#tit-one {
    border: 3px solid red;
}
body {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.outline {
    color: red;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}
.out.abc{
    background-color: yellow;
}

效果预览

技术分享图片


一起进步吧!!

前端学习第一课——HTML

原文:https://www.cnblogs.com/zouludaxia/p/14053063.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!