前端学习--Day02

基本标签

一、标题标签
h1标签定义最大的标题。h6标签定义最小的标题。h1-h6标签语义越来越轻。

<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h5>我是h4</h5>
<h5>我是h5</h5>
<h6>我是h6</h6>

二、段落标签
一段一段文字的时候使用

<h3>登鹊鹤楼</h3>
<p>白日依山尽,</p>
<p>黄河入海流;</p>
<p>欲穷千里目,</p>
<p>更上一层楼。</p>

三、链接标签
href:目的地
title:鼠标悬停内容
target:设置跳转的方式
_self:默认,在当前页面打开
_blank:在新的页面打开

<h1 id="top">我是h1</h1>

<a href="http://www.baidu.com" title="我想去百度" target="_blank">百度一下</a>
<br>
<a href="#top">回到顶部</a>

四、图片标签
上一级目录: …/
当面目录: ./

<img src="url"/>	
<img src="./image/luhan.jpg" title="鹿晗" alt="图片加载失败"/>
src:图片路径
title:鼠标悬停的内容
alt:图片加载失败时显示的文字

五、列表标签

1.无序列表
无序列表始于 ul标签。每个列表项始于 li标签。

<ul type="square">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>音乐</li>
    <li>学习</li>
</ul>

(1). 每一个项目前面有一些符号
(2). 可以通过type属性去设置符号类型(方块、圆)

2.有序列表
有序列表始于 ol 标签。每个列表项始于 li 标签。
Type:计数方式:0-9,A-Z,a-z,i、ii、iii、iv
Start:开始的系数

<ol type="I" start="1">
    <li>鹿晗</li>
    <li>张杰</li>
    <li>胡斐</li>
    <li>彭文辉</li>
</ol>

3.定义列表
自定义列表以 dl 标签开始。每个自定义列表项以 dt标签开始。每个自定义列表项的定义以 dd标签 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

六、表单标签
1.文本输入框:

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

2.密码框:

</label><input id="password" type="text" name="password">

3.Label:
一般和input标签,点击label的时候,对应的input会获取焦点

<label for="username">用户名:</label><input id="username" type="text" name="username"><br>
<label for="password">密码:</label><input id="password" type="text" name="password"><br>

4.按钮:
(1).提交按钮:

<input type="submit" value="提交">
(2).普通按钮:
<input type="button" value="我是普通按钮">
<button>普通按钮</button>
(3).重置按钮:
<input type="reset" value="重置">
(4).单选按钮:
性别:
<label for="man"></label><input name="sex" type="radio" id="man" value="man" >
<label for="woman"></label><input name="sex" type="radio" id="woman" value="woman">

(5).多选按钮(复选框):
爱好:
彭文辉:<input type="checkbox" name="love" value="pwh">
胡斐:<input type="checkbox" name="love" value="hf">
程进<input type="checkbox" name="love" value="cj">

5.下拉列表:

归属地:
<select name="come">
    <option>南昌</option>
    <option>景德镇</option>
    <option>赣州</option>
    <option>吉安</option>
</select>

6.上传文件:

<input type="file" name="file">

7.隐藏域:
这个标签是隐藏的

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

猜你喜欢

转载自blog.csdn.net/qq_45062472/article/details/108173511
今日推荐