前端基本知识-前端-CSS教程

1:基本元素

p 标签的作用为使内容变为单独段落

hr 水平线

br 换行

div 纵向换行，单纯的换行

span 形成独立空间

2:超链接

超链接(超文本之间的互相链接)

href：跳转的资源路径

target：代表打开资源的方式，其值：_blank新窗口打开,_self(默认)本窗口，_parent父级窗口，_top顶级窗口，自定义窗口后三个与iframe标签相关

a href="https://www.bilibili.***/ " target="_blank">从新页面跳转到哔哩哔哩 a>

例子：从新页面跳转到哔哩哔哩

3:图片

src：指定图片资源的路径,可以是相对路径也可以是绝对路径，一般用相对路径，相对路径的移植性强

alt：当图片没有显示出来时，所做的文字说明

width：图片的宽图片的默认为原图片大小宽和高设置的时候二选一，图片会进行等比例变化

height：图片的高

img src="C:\Users\32252\Pictures\Saved Pictures/AJ11.jpg" 这里使用的是绝对路径

4:iframe嵌套页面

src 嵌套的网页地址

width 嵌套窗口的宽度

height 嵌套窗口的高度

frameborder 嵌套窗口边框

name 定义窗口名称

5:通用元素

通用属性（谁都可以加）

id：用于指定html元素的唯一标识，id不能重复

class：用于指定html元素的类别

style：用于设置元素的样式

例子：

张三

李四

王五

6:表格

border:边框

cellpadding：设置单元格填充

cellspacing：设置单元格间距

width：表格宽度

tr：行

width：表格行宽度

align：对齐方式（left right center）

td：普通单元格

width：表格单元格宽度

align：对齐方式

colspan:合并列比如说将第三行第四列和第二行第四列合并，将第三行第四列设置为colspan=“2”，将第二行第四列删除（在同一行进行删除操作）

rowspan:合并行在同一列进行删除操作

th：标题单元格（居中加粗）

width：表格单元格宽度

align：对齐方式

col：列（col不参与表格的构建）

span合并列

thead（表头）,tbody,tfoot（表尾）:分类管理tr形成管理空间

例子：

	周一	周二	周三	周四	周五	周六	周日
第一节	大四自习	大四自习	上课	上课	大四自习	休息	上课
第二节	大四自习	大四自习	上课	上课	大四自习		上课
第三节	大四自习	大四自习	上课	上课	大四自习		上课
午休
第四节	上课	大四自习	上课	上课	上课		上课
第五节	上课	大四自习	上课	上课	上课		上课
第六节	上课	大四自习	上课	上课	上课		上课
第七节	上课	大四自习	上课	上课	上课		上课
晚饭
第八节	大四自习	大四自习	大四自习	上课	上课		上课
第九节	大四自习	大四自习	大四自习	上课	上课		上课
第十节	大四自习						大四自习
	每节课五十分钟，中间十分钟休息；第一节课上午九点开始，晚上七点第九节课，午休两个小时，自习时间均有作业，大三同学有课冲突的话由老师补课，一周内补课完毕。其余时间大三没课同学过来跟大四自习时间一起做作业

7:列表

无序列表 ul

子元素 li

有序列表 ol

start：设置开始值

type：技术类型（默认阿拉伯数字，i小写希腊数字，I大写希腊数字，a英文字母）

子元素 li

详情列表 dl

子元素 dt标题 dd详情

例子:

无序列表种的元素
无序列表种的元素
无序列表种的元素
无序列表种的元素

有序列表中的元素
有序列表中的元素
有序列表中的元素
有序列表中的元素

标题

详情

8:input

type:range | number
min：最小值
max：最大值
step：步长值
表单控件的通用属性
value：默认值
readonly：只读（只能看不能改）
disabled：失效
placeholder：提示信息
type：checkbox | radio
checked：选中
input 配套的说明标签 label
label上的for跟input上的id属性一致，可以达到联动效果
type：select下拉框
multiple：多选
size：显示的选项数
子元素option
optgroup元素的作用是将option分组
label：代表组名
type：textarea 多行文本域
rows：设置多行文本框的高
cols：设置多行文本框的宽
audio音频元素
src：音频播放路径
controls：是否显示播放器
autoplay：是否自动播放音频
loop:是否循环播放
video 视频元素
src：视频播放路径
controls：是否显示播放器
autoplay：是否自动播放视频
loop:是否循环播放

例子:
姓名：
密码：
性别：男女
爱好：球鞋骑车滑雪看电视剧
头像：
颜色：
日期：
时间：
周数：
年龄：
音量：

鞋型： AJ1 AJ4 AJ11 AJ23 AJ34 AJ2 AJ8 AJ10 AJ35
简介：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1><a name="1">1:基本元素</a></h1>
    <div>p 标签的作用为使内容变为单独段落</div>
    <div>hr 水平线</div>
    <div>br 换行</div>
    <div>div 纵向换行，单纯的换行</div>
    <div>span 形成独立空间</div>

    <h1><a name="2">2:超链接</a></h1>
    <div>超链接(超文本之间的互相链接)</div>
    <div>href：跳转的资源路径</div>
    <div>target：代表打开资源的方式，其值：_blank新窗口打开,_self(默认)本窗口，_parent父级窗口，_top顶级窗口，自定义窗口 后三个与iframe标签相关</div>
    <div>a href="https://www.bilibili.***/ " target="_blank">从新页面跳转到哔哩哔哩 a></a>
    </div>
    <div>例子：<a href="https://www.bilibili.***/ " target="_blank">从新页面跳转到哔哩哔哩</a></div>

    <h1><a name="3">3:图片</a></h1>
    <div>src：指定图片资源的路径,可以是相对路径也可以是绝对路径，一般用相对路径，相对路径的移植性强</div>
    <div>alt：当图片没有显示出来时，所做的文字说明</div>
    <div>width：图片的宽 图片的默认为原图片大小 宽和高设置的时候二选一，图片会进行等比例变化</div>
    <div>height：图片的高</div>
    <div>img src="C:\Users\32252\Pictures\Saved Pictures/AJ11.jpg" 这里使用的是绝对路径</div>

    <h1><a name="4">4:iframe嵌套页面</a></h1>
    <div>src 嵌套的网页地址</div>
    <div>width 嵌套窗口的宽度</div>
    <div>height 嵌套窗口的高度</div>
    <div>frameborder 嵌套窗口边框</div>
    <div>name 定义窗口名称</div>
    <div> <iframe src="http://taobao.***" frameborder="0" width="30%" height="500">淘宝</iframe></div>

    <h1><a name="5">5:通用元素</a></h1>
    <div>通用属性（谁都可以加）</div>
    <div>id：用于指定html元素的唯一标识，id不能重复</div>
    <div>class：用于指定html元素的类别</div>
    <div>style：用于设置元素的样式</div>
    <div>例子：
        <div class="boy" id="zs" style="background: red;">张三</div>
        <div class="boy" id="ls" style="background: yellow;">李四</div>
        <div class="girl" id="ww" style="background: green;">王五</div>
    </div>

    <h1><a name="6">6:表格</a></h1>
    <div>border:边框</div>
    <div>cellpadding：设置单元格填充</div>
    <div>cellspacing：设置单元格间距</div>
    <div>width：表格宽度</div>
    <h2>tr：行</h2>
    <div>width：表格行宽度</div>
    <div>align：对齐方式（left right center）</div>
    <h2>td：普通单元格</h2>
    <div>width：表格单元格宽度</div>
    <div>align：对齐方式</div>
    <div>colspan:合并列 比如说将第三行第四列和第二行第四列合并，将第三行第四列设置为colspan=“2”，将第二行第四列删除（在同一行进行删除操作）</div>
    <div>rowspan:合并行 在同一列进行删除操作</div>
    <h2>th：标题单元格（居中 加粗）</h2>
    <div>width：表格单元格宽度</div>
    <div>align：对齐方式</div>
    <h2>col：列（col不参与表格的构建）</h2>
    <div>span合并列</div>
    <h2>thead（表头）,tbody,tfoot（表尾）:分类管理tr形成管理空间</h2>
    <div>例子：<br>
        <table border="1" cellpadding="10" cellspacing="0">
            <tr>
                <td></td>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
            <tr>
                <th>第一节</th>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>大四自习</td>
                <td rowspan="12" align="center">休息</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第二节</th>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第三节</th>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>午休</th>
                <td colspan="5"></td>
                <td></td>
            </tr>
            <tr>
                <th>第四节</th>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第五节</th>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第六节</th>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第七节</th>
                <td>上课</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>晚饭</th>
                <td colspan="5"></td>
                <td></td>
            </tr>
            <tr>
                <th>第八节</th>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第九节</th>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>大四自习</td>
                <td>上课</td>
                <td>上课</td>
                <td>上课</td>
            </tr>
            <tr>
                <th>第十节</th>
                <td colspan="5" align="center">大四自习</td>
                <td>大四自习</td>
            </tr>
            <tr>
                <td></td>
                <td colspan="7">每节课五十分钟，中间十分钟休息；第一节课上午九点开始，晚上七点第九节课，午休两个小时，自习时间<br>均有作业，大三同学有课冲突的话由老师补课，一周内补课完毕。其余时间大三没课同学过来跟大四自习时间一起做作业</td>
            </tr>
        </table>
    </div>

    <h1><a name="7">7:列表</a></h1>
    <h2>无序列表 ul</h2>
    <div>子元素 li</div>
    <h2>有序列表 ol</h2>
    <div>start：设置开始值</div>
    <div>type：技术类型（默认阿拉伯数字，i小写希腊数字，I大写希腊数字，a英文字母）</div>
    <div>子元素 li</div>
    <h2>详情列表 dl</h2>
    <div>子元素 dt标题 dd详情</div>
    <div>例子:<br>
        <ul>
            <li>无序列表种的元素</li>
            <li>无序列表种的元素</li>
            <li>无序列表种的元素</li>
            <li>无序列表种的元素</li>
        </ul>

        <ol>
            <li>有序列表中的元素</li>
            <li>有序列表中的元素</li>
            <li>有序列表中的元素</li>
            <li>有序列表中的元素</li>
        </ol>

        <dl>
            <dt>标题
            <dd>
                详情
            </dd>
        </dt>
        </dl>
    </div>

    <h1><a name="8">8:input</a></h1>
    <div>type:range | number<br> min：最小值
        <br> max：最大值 <br> step：步长值
        <br> 表单控件的通用属性

        <br> value：默认值
        <br> readonly：只读（只能看不能改）
        <br> disabled：失效
        <br> placeholder：提示信息
        <br> type：checkbox | radio<br> checked：选中
        <br> input 配套的说明标签 label<br> label上的for跟input上的id属性一致，可以达到联动效果
        <br> type：select下拉框

        <br> multiple：多选
        <br> size：显示的选项数
        <br> 子元素option
        <br> optgroup元素的作用是将option分组
        <br> label：代表组名
        <br> type：textarea 多行文本域<br> rows：设置多行文本框的高
        <br> cols：设置多行文本框的宽
        <br>audio音频元素
        <br>src：音频播放路径
        <br>controls：是否显示播放器
        <br>autoplay：是否自动播放音频
        <br>loop:是否循环播放

        <br>video 视频元素
        <br>src：视频播放路径
        <br>controls：是否显示播放器
        <br>autoplay：是否自动播放视频
        <br>loop:是否循环播放
    </div>
    <div>例子:<br>姓名：<input type="text" placeholder="请输入姓名"><br>密码：<input type="password" placeholder="请输入密码"> <br>性别：
        <input type="radio" name="sex" id="man" checked><label for="man">男</label>
        <input type="radio" name="sex" id="woman"><label for="woman">女</label><br> 爱好：
        <input type="checkbox" checked>球鞋<input type="checkbox" checked>骑车<input type="checkbox" checked>滑雪<input type="checkbox">看电视剧<br> 头像：
        <input type="file" name="" id=""><br> 颜色：
        <input type="color" name="" id=""><br> 日期：
        <input type="date" name="" id=""><br> 时间：
        <input type="time"><br> 周数：
        <input type="week"><br> 年龄：
        <input type="number" min="0" max="120" value="19"><br> 音量：
        <input type="range" name="" id="" min="0" max="100" step="20" value="100"><br>
        <input type="button" value="请按我"><input type="submit"><input type="reset"><br> 鞋型：
        <select name="" id="">
                <optgroup label="喜欢的鞋型">
                        <option value="">AJ1</option>
                        <option value="">AJ4</option>
                        <option value="">AJ11</option>
                        <option value="">AJ23</option>
                        <option value="">AJ34</option>
                </optgroup>
                <optgroup label="不喜欢的鞋型">
                        <option value="">AJ2</option>
                        <option value="">AJ8</option>
                        <option value="">AJ10</option>
                        <option value="">AJ35</option>
                </optgroup>
            </select><br> 简介：
        <textarea name="" id="" cols="30" rows="10"></textarea></div>
</body>

</html>

javascript html

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端基本知识

东亚

分享到：