HTML进阶

常用的标签：<div>块标签 <span>文本标签 <link>链接一个外部样式表 <h1>-<h6>标题

<a>超链接  <img>图片 <button>按钮 <input>输入框 <br>换行 <p>换段落 <ul>无序列表

<hr>水平分割线 <table>表格 

html新增属性：姓名：

 <input type="text" name="username" value="">

密码：

<input type="password" name="password" id="">

单选：

<input type="radio" name="sex" id="">男
        <input type="radio" name="sex" id="">女

复选:

<input type="checkbox" name="hobby" id="1">吃
        <input type="checkbox" name="hobby" id="2">喝
        <input type="checkbox" name="hobby" id="3">玩
        <input type="checkbox" name="hobby" id="4">乐

下拉框:

<select name="city" id="">
            <option value="1">太原</option>
            <option value="2">北京</option>
            <option value="3">上海</option>
            <option value="4">广州</option>
        </select>

文本域：

<textarea name="beizhu" id="" cols="30" rows="10"></textarea>

数字输入框:

<input type="number" min="0" max="100" step="5" value="">

  邮箱:

<input type="email" name="email"><br>

 地址:

<input type="url" name="url">

日期

 <input type="date">

 时间:

 <input type="time" value="">

 日期时间:

 datetime所有浏览器都不支持

 datetime-local支持谷歌

 <input type="datetime-local">

 月份:

<input type="month">

星期:

<input type="week" name="week">

搜索:

<input type="search" search="s">

 color:

<input type="color">

 提交按钮:

<input type="submit" value="确认">

语义化：

什么是语义化

每一个 HTML 元素都有具体含义。

所有元素于展示效果无关。

元素展示到页面中的效果，应该由 CSS 决定。

因为浏览器带有默认的 CSS 样式，所以每个元素有一些默认样式。

选择什么元素，取决于内容的含义，而不是显示出的效果

新增语义化标签:

header------头部标签

nav------导航标签

article------内容标签

section------块级标签

aside------侧边栏标签

footer------尾部标签