HTML5笔记

wcx999

已于 2022-07-01 14:15:43 修改

阅读量275

点赞数

分类专栏：笔记文章标签： html5

于 2022-04-08 19:50:36 首次发布

本文链接：https://blog.csdn.net/wcx999/article/details/124047673

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5

基本结构

HTML5基本标签

头部标签(head title base link meta sript style)

其他表单标签（select option textarea（多行文本框）datalist（下拉选项））

HTML5

基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML5基本标签

头部标签(head title base link meta sript style)

<link rel="stylesheet" type="text/css" href="mystyle.css">
<base href="http://baidu.com/images" />
<base target="_blank" /> //＜base＞标签为页面上的所有链接规定默认地址或默认目标
如果没有指定目录，那么直接在此文档下面搜索文件。

<style type="text/css">
		body {background-color:yellow}
		p {color:blue}
	</style>
<script type="text/javascript">
alert("这是运行一个脚本");
</script>

标题标签（h1-6）

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

输入框（input）

类型有 url, email, date, time, datetime, month, week, number, range, search, tel, color

<input type="number" name="number" max="100" min="20" value="50" />

段落标签（p pre）

<p>这是一个段落</p>

链接标签（a）

<a href="https://www.baidu.com">打开百度，你就知道！</a>

图像标签（img）

属性可以有width height

alt	图片显示不出来时的提示文字

title

鼠标移到图片上的提示文字

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">

表格标签（table tr td th）

合并行 rowspan = ”2“

合并列 colspan = “2”

<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>表头一</th>
        <th>表头二</th>
        <th>表头三</th>
        <th>表头四</th>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
        <td>单元格三</td>
        <td>单元格四</td>
    </tr>
</table>

列表标签(ul li ol li)

无序标签

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

有序标签

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

自定义列表

<dl>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
</dl>

分组标签（div和span）

表单标签（form、label）

from input lable演示

<form action="" method="get">
    <p>
        <label for="username">账户：</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    </p>
    <p><input type="submit"></p>
</form>

其他表单标签（select option textarea（多行文本框）datalist（下拉选项））

textarea演示

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

<form action="" method="post">
    <textarea name="mycontext" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

fieldset、legend、select、optgroup、option演示

<form action="" method="post">
    <fieldset>
        <legend>请选择你的爱好：</legend>

        <select name="myhobby" id="myhobby">
            <optgroup label="运动">
                <option value="篮球">篮球</option>
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="电子">
                <option value="看电影">看电影</option>
                <option value="看电视">看电视</option>
            </optgroup>
        </select>
    </fieldset>
</form>

datalist演示

<form action="" method="post">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>

单选框演示

<form action="" method="post">
    <input type="radio" name="sex" id="male" value="male" checked>
    <label for="male">Male</label>

    <input type="radio" name="sex" id="female" value="female">
    <label for="female">female</label>
</form>

复选框演示

<form action="" method="post">
    <input type="checkbox" name="vehicle" id="bike" value="bike">
    <label for="bike">I have a bike</label>

    <input type="checkbox" name="vehicle" id="car" value="car">
    <label for="car">I have a car</label>
</form>