【html 走进web】Web基础 网页的骨骼HTML

什么是HTML
超文本标记语言:Hyper Text Markup Language

这都不重要,重要的是:
HTML是Web网页的基本组成部分
HTML中定义的元素,决定了网页的内容和结构

Python:编程语言,编写程序
HTML:标记语言,像画画一样,画出网页的内容

基本结构
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------

常用标签
单标签、双标签
<meta charset="UTF-8"/>
<title>我是一个标题</title>

块级标签、內联标签
<h1>我是一号标题</h1>,块级
<h6>我是六号标题</h6>,块级
<p>我是一个默默无闻的段落</p>,块级
<a href="http://zhanghonglun.cn" target="_blank">带你去一个好地方</a>,内联
<img src="logo.png" width="200" height="200"/>,内联
<br/>
<div>我是块级元素</div>
<span>我是内联元素</span>

表格:table、tr、th、td
列表:ul、ol、li
下拉:<select><option></option></select>

元素的属性
id、class、style
<a href="#id">跳转到某个id的元素</a>

HTML注释
<!-- 这是一个注释 -->

表单
--------------------------------------------------------------------------------
<form action="" method="post">
用户名 <input type="text" placeholder="默认文本" name="username"/>
密码 <input type="text" placeholder="密码" name="password"/>
一大段文本 <textarea rows="10" cols="10" placeholder="想说的话" name="content"></textarea>
<button type="submit">登陆</button>
</form>
--------------------------------------------------------------------------------
input的type:button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time

HTML颜色
十六进制:#FFF
RGB:rgb(255, 255, 255),rgba(255, 255, 255, 1)
颜色名称:red,green,blue

DOM
文档对象模型:Document Object Model

HTML5
新标签:canvas、svg、audio、video、embed
svg:http://www.runoob.com/svg/svg-tutorial.html
canvas:http://zhanghonglun.cn/blog/canvas初探:基本语法

新的语义元素:header、nav、section、article、aside、figcaption、figure、footer

新功能:元素拖放、地理定位、video、audio、更丰富的input type、Web存储(localStorage和sessionStorage)

HTML补充学习
http://www.runoob.com/html/html-tutorial.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>我爱HTML</title>
    </head>
    <body>
        <h1>这里是一级标题</h1>
        <h2>这里是二级标题</h2>
        <h3>这里是三级标题</h3>
        <h4>这里是四级标题</h4>
        <h5>这里是五级标题</h5>
        <h6>这里是六级标题</h6>

        <p>这里是段落内容</p>

        <a href="http://zhanghonglun.cn" target="_blank">一个干货满满的地方</a>

        <img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>
        <img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>

        <p>这是一段<br/>换行的段落</p>

        <div>
            div里面可以包含其他HTML标签或者文本内容
            <p>这个div是页面的第一块内容</p>
        </div>

        <div>
            <p>这个div是页面的第二块内容</p>
            <div>
                <span>span是内联标签,后面的文本不换行</span>
                <span>div里面还可以嵌套其他div</span>
                <p>div的使用可以让页面内容更加结构化、有层次</p>
            </div>
        </div>

        <table>
            <tr>
                <th>语言</th>
                <th>难度</th>
                <th>功能</th>
            </tr>
            <tr>
                <td>Python</td>
                <td>简单</td>
                <td>强大</td>
            </tr>
            <tr>
                <td>R</td>
                <td>简单</td>
                <td>强大</td>
            </tr>
        </table>

        <ol>
            有序列表
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ol>

        <ul>
            无序列表
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ul>

        <p id="main">这是最主要的一段话</p>
        <a href="#main">跳到main所在位置</a>

        <p class="content">这些段落都是普通内容</p>
        <p class="content">这些段落都是普通内容</p>
        <p class="content">这些段落都是普通内容</p>

        <p style="color:red;">这是一段有颜值的内容</p>

        <!--这是一个注释!-->

        <form action="" method="post">
            用户名 <input type="text" placeholder="用户名" name="username"/>
            密码 <input type="password" placeholder="密码" name="password"/>
            <select>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
            一大段文本 <textarea rows="10" cols="10" placeholder="一大段文本" name="content"></textarea>
            <button type="submit">登陆</button>
        </form>

        <p style="color:rgb(255,0,0);">红色</p>
        <p style="color:#0f0;">绿色</p>
        <p style="color:blue;">蓝色</p>

        <header>导航栏部分</header>
        <div id="header">导航栏部分</div>
    </body>
</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页