• 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础

    目录

    HTML5标签

    doctype 标签
    HTML 版本 doctype 声明
    HTML5
    XHTML1.0
    HTML4.0
    html标签
    		<html>
    			文件的全部内容
    		html>
    head标签
    		<html>
    			<head>文件头head>
    			<body>文件主体body>
    		html>
    meta标签
    		<html>
    			<head>
    				<meta charset="utf-8" />
    		 	head>
    			<body>文件主体body>
    		html>
    title标签
    		<html>
    			<head>
    				<meta charset="utf-8">
    				<title>窗体标题title>
    		 	head>
    			<body>文件主体body>
    		html>
    body标签
    		<html>
    			<head>
    				<meta charset="utf-8">
    				<title>窗体标题title>
    		 	head>
    		<body>
    				body 标签里面的文本
    				
    			body>
    		html>

    文本和超链接标签

    标题标签
    		<h1> 这是 h1 标签效果 h1>
    		<h2> 这是 h2 标签效果 h2>
    		<h3> 这是 h3 标签效果 h3>
    		<h4> 这是 h4 标签效果 h4>
    		<h5> 这是 h5 标签效果 h5>
    		<h6> 这是 h6 标签效果 h6>
    段落标签
    		<p> 段落正文内容 p>
    换行标签
    		一行文本 <br> 另起一行
    水平标签
    		<hr 属性 =" 属性值 ">
    强调标签
    		<b> 要以粗体显示的文字 b>
    		<strong> 要以粗体显示的文字 strong>

    图片标签与超链接标签

    图片标签
    		<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width="宽度" height="高度"/>
    属性 说明 默认值
    src 图 片 地 址， 接 受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径 left
    width、height 设定线条厚度。以像素作单位 2
    align 设定线条长度。可以是绝对值（以像素为单位）或相对值 100%
    alt 设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color="blue" 黑色
    noshade 设定线条为平面显示，若取消此项则具有阴影或立体 —
    超链接标签
    		<a 属性 ="属性值"> 链接显示文本 a>
    属性 说明 默认值
    href 链接的目标 URL —
    target 在何处打开目标 URL。仅在 href 属性存在时使用 _self

    音频标签视频标签

    音频标签
    		<audio width="640" height="360" src="music.mp3" controls="true">
    		您的浏览器不支持 audio 元素！
    属性 值 描述
    autoplay autoplay 如果是 autoplay，则音频在就绪后马上播放
    controls controls 如果是 controls，则向用户显示控件，如播放按钮
    end 数字值 定义播放器在音频流中的何处停止播放。默认声音会播放到结尾
    loopend 数字值 定义在音频流中循环播放停止的位置，默认是end 属性的值
    loopstart 数字值 定义在音频流中循环播放的开始位置。默认是start 属性的值
    playcount 数字值 定义音频片断播放多少次，默认是 1
    src url地址 所播放音频的 url地址
    start 数字值 定义播放器在音频流中开始播放的位置。默认声音在开头进行播放
    视频标签
    		<video width="320" height="240" controls="controls">
    		    <source src="movie.ogg" type="video/ogg">
    		    <source src="movie.mp4" type="video/mp4">
    		    您的浏览器不支持 audio 元素！
    		video>
    属性 值 描述
    autoplay autoplay 如果是 autoplay，则视频在就绪后马上播放
    src url地址 所播放视频的 url地址
    perload none | metadata | auto 用于指定视频或音频数据是否预加载：none（不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频）
    loop loop 用于指定是否循环播放视频或音频
    poster url地址 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像
    controls controls 如果是 controls，则向用户显示控件，如播放按钮
    width 数字值 用于指定视频的宽度
    height 数字值 用于指定视频的高度

    列表、div 以及 span 标签

    列表标签

    一、无序列表

    		<ul type="项目符号类，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）">
    			<li> 第 1 项 li>
    			<li> 第 2 项 li>
    		ul>

    二、有序列表

    		<ol type="序列类型" start="序号起始值">
    			<li> 第一项 li>
    			<li> 第二项 li>
    		ol>

    三、自定义列表

    		<dl>
    			<dt> 名词 1<dd> 解释 1
    			<dt> 名词 2<dd> 解释 2
    			<dt> 名词 3<dd> 解释 3
    		dl>
    div 标签

    div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。

    		<div>
    			其他标签或内容
    		div>
    span标签

    span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。

    		<span> 文本 span>

    表格标签

    ……
    标签 描述
    ……
    		 表格标签
    行标签
    …… 单元格标签 
    		<table>
    			<tr>
    				<td>单元格内的文字td>
    				<td>单元格内的文字td>
    			<tr>
    			<tr>
    				<td>单元格内的文字td>
    				<td>单元格内的文字td>
    			<tr>
    		table>

    colspan 表示跨越的列数，rowspan 表示跨越的行数

    		<table>
    			<tr>
    				<td colspan=“所跨的列数”> 单元格内容 td>
    			tr>
    		table>

    其他相关标签

    • 表格标题标签 *caption*，用于描述整个表格的标题。
    • 表格表头 *th*，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
    • 表格数据的分组标签 *thead*、*tbody* 和 *tfoot*，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。

    表单标签

    表单控件标签写法 说明
    单行文本输入框。使用的是 input 标签和 type 属性
    将表单中的信息提交给表单中 action 属性所指向的地址
    复选框
    单选钮
    密码输入框（输入的文字用 * 表示）
    下拉框