day10 前端技术-HTML&CSS

HTML

含义:超文本标记语言,静态网页,用于在浏览器显示数据

双标签:<> </>,开始标签和结束标签同时出现

单标签:

---

属性名:属性后面的值都加双引号

常用的HTML标签

:文档的根标签 :HTML页面的头部标签

“

“”:页面主体部分

“

“

“

到

”:标题标签

“

”:段落标签

“

”:块标签

“”:行内标签

“
”:换行

“

---

”:水平线

超链接和锚点

超链接(一般放在a标签里面)

herf:指定页面跳转页面的地址
#:表示当前页面
target=“_blank”:在新窗口打开

<a href="https:www.baidu.com" target="_blank">百度一下</a>

锚,超链接的使用

列表标签

type:改变前面的形状
style:设置前面的形状是否展示

有序列表(ul)

<ul type="circle" style="list-style: none">
    <li>内容 </li>
</ul>

无序列表(ol)

<ol>
  <li>杨玉环</li>
</ol>

自定义列表(dl)

<dl>
  <dt>四大美女</dt>//表头
  <dd>杨玉环</dd>//表体
</dl>

图片标签

src:指定图片的路径
相对路径:相对于当前HTML页面的路径
../:回到上一级
./:当前目录
一般只改宽度,否则失侦
alt:加载失败后用于描述图片
title:鼠标一上去有提示

<a href="https:www.baidu.com">
    <img src="./imags/7.png" alt="小气" width="100px" title="perfect">
</a>

表格标签

使用

进行描述

一行数据使用标签

表头使用标签

表体使用标签

border:边框的宽度
cellpadding:内边距
cellspacing:外边距
align:设置表格的位置

<table width="70%" border="2" cellpadding="10px" cellspacing="0" align="center">
  <!--表头使用th标签-->
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
    
  <tr align="center">
    <td>熊大</td>
    <td>25</td>
  </tr>
</table>

表单标签

该标签的属性名称较多,切记不能搞混

action:将表单的数据提交到哪里

使用标签

所有的标签都写在该标签之下

子标签使用标签

用于收集信息

type具有多种属性

1.单行文本框:type=“text”,输入的信息显示在框中

2.密码输入框:type=“password”,输入文本以点进行显示

3.单选框:type=“radio”

4.复选框:type=“checkbox”,可以进行多个选择

5.普通按钮:type=“button”,没有效果,可以使用js添加效果

6.注册按钮:type=“submit”,将表单提交到action指定的位置

7.重置按钮:type=“reset”,清空表单数据

8.上传文件:type=“file”,将本地的文件进行上传

9.图像域:type=“image”,使用图片代替提交按钮

标签中的其他标签:

name:指定input标签的属性,否则不能提交数据

value:给input标签赋值初始值

checked:设置单选框和复选框是否一开始就被选中

placehlder:提示信息

select标签

设置下拉框

默认是将option标签之间的文本提交到服务器
multiple:多选
size:一次显示多少个

<select name="address" > <!-- multiple size="5"-->
  <!--selected:默认选中的数据-->
  <option value="1" >重庆</option>
  <option value="2"selected>四川</option>
  <option value="3">广州</option>
</select>

文本域

用户录入多行数据

<textarea name="简介" placeholder="输入文本"></textarea>

lue=“1” >重庆

文本域

用户录入多行数据

<textarea name="简介" placeholder="输入文本"></textarea>