html5

基础结构


DOCTYPE html>
<html>
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>basetitle>
    
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/main.js">script>
head>
<body>

<form>form>

<script>script>
body>
html>

块级标签:独占一行

<div>divdiv>
<p>段落一p>
<h1>一级标题h1>
<h6>六级标题h6>
<ol>有序列表
    <li>项目一li>
    <li>项目二li>
ol>
<ul>无序列表
    <li>项目一li>
    <li>项目二li>
ul>
<dl>自定义列表
    <dt>列表一dt>
    <dd>dd1dd>
    <dd>dd2dd>
    <dt>列表二dt>
    <dd>dd3dd>
    <dd>dd4dd>
dl>

行内标签:不能独占一行,不能设置宽高属性

<a href="http://www.baidu.com">百度a>
<span>span1span>
<strong>strong1strong>

行内块级标签:不能独占一行,可以设置宽高属性

<br/>

<input>

块级标签与行内标签转换

<div style="display: inline">块级转行内div>
<span style="display: block">行内转块级span>

表单标签

<form action="" method="post"/>
    <input type="password"/>
    <input type="submit"/>
    <input type="button"/>
    <input type="date"/>
    <input type="reset"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <select>
        <option>option>
    select>
form>

新表单标签

<form id="form2">
	<input type="email"/>
	<input type="url"/>
	<input type="number" value="0" step="10"/>
	<input type="range"/>
	<input type="datetime-local"/>
	<input type="search"/>
	<input type="color"/>
	<input type="text" placeholder="姓名"/>
	<input type="submit" form="form2">button>
form>

表格标签

<table border="1px" cellspacing="0px" cellpadding="10px">
    <tr>
        <td>td1td>
        <td>td2td>
    tr>
    <tr>
        <td colspan="2">td3td>
    tr>
table>

多媒体标签


<audio controls>
	<source src="../static/demo.mp4">
audio>

<video muted controls style="width: 500px;height: 300px;">
	<source src="../static/demo.mp4">
video>

你可能感兴趣的:(html5)