HTML4的基础知识

标签

标签

主题标签 hx

段落标签 p

换行标签 br

网站的结构

1.html--骨架

2.css--样式

3.js--java编程（逻辑）

文本格式化标签

加粗，倾斜，下划线，删除线， 上标和下标

strong || b 加粗

em || i 倾斜

del ||s 删除线

ins || u 下划线

sup 上标 sub 下标-->

容器标签

div 块缓存器 独占一行

span 文本容器 不独占一行（除非屏幕宽度不够，会自动换行）

网页的发展史

1.第一代布局方式table

2.第二代布局方式div+css

img 图片标签

1.img标签是一个单标签

2.img标签有2个常用的属性（属性是写在始便签当中）四大属性：3 4 6 7

3.src属性表示引入图片的资源路径

4.alt属性表示引入图片路径出错显示的文本

5.title属性鼠标放在目标上显示的文本

6.width属性表示设置图片的宽度

7.height属性表示设置图片的高度

win+shift+s 截屏

img src路径 重点内容

1.相对路径

/ 服务器当前根目录

./ 当前目录

./同级目录/下级目录

../上一级目录

2.绝对路径

2.1、网络路径（无法更改，网址形式，在哪里都能打开）

2.2、 本地盘符路径 F:\XSBDownload\上\图片\2.png

超链接 a标签的href属性

href属性的值是资源地址

百度一下是外部链接 网页5是内部链接

target属性值 _blank在新窗口打开页面

target属性值 _self关闭当前页面 在新窗口打开页面

target属性值 _parent关闭当前页面 在父框架集打开新页面

target属性值 _top关闭当前页,在最上面的框架集打开新页面

---

​

a标签的href属性

​

<a href="tel:18675434566">可以拨打电话

百度一下 ​ 网页5

 <h4>a标签的target属性值  _blank在新窗口打开页面
    target属性值  _self关闭当前页面 在新窗口打开页面
    target属性值  _parent关闭当前页面 在父框架集打开新页面
    target属性值  _top关闭当前页,在最上面的框架集打开新页面</h4>

网页5 ​ 网页5 ​ 网页5 ​ 网页5

锚点链接

锚点：本页面跳转

锚点链接 # 空链接

锚点链接（#+锚点名称）

空链接

锚点设置 （id="名称")

div盒子边框设置

style:设置属性

height:设置盒子的高度 height: 100px;

width:设置盒子的宽度 widtht: 100px;

border:设置盒子边框的粗细和颜色 border:1px solid red;

表格 table

tr 行

td 列

table 常用属性

border 边框 值 数字

cellpadding 表示td的内边距

cellspacing 表示td的外边距

width: 表格的宽度

height:表格的高度

不常用

align 表示表格的排列，默认最左边

bgcolor 表示表格的颜色

​​

姓名	年龄	性别
张三	20	男

​

table表格合并

th 表示单元格表头

1.行合并 rowspan="数字" 数字表示合并的行数 上下行合并

2.列合并 colspan="数字" 数字表示合并的列数 左右列合并

​​

姓名	年龄	性别
ss	20	女
	20	女
ff		男

​

表单 form 包含3个标签

action属性：表示后端的请求地址

methods属性：表示发送的方式get/post

1.post:传输大量数据使用，传输前会打包数据，传输较慢，但是相对安全，传输

数据都能正确解析，传中文不会乱码

2.get：以URL传递的，对数据量有限制，传中文可能会有乱码

input 文本框（输入框）特殊属性

1. 输入框属性 placeholder="文字提示" 写在input标签里，输入提示。当表单获取焦点，输入文字时，会消失。输入框的背景字体，颜色是灰色

2. 输入框属性 readonly 只读，不能输入

3.按钮属性 disabled 按钮不能点击

4、点击文本选择复选框

4.1、隐式 label的for的值指向input的id值，它们的值是一一对应的关系

<input type="checkbox" id="music" /> <label for="music">音乐</label>

4.2、显式 把input标签放在label标签里面，不需要写for和id值

<label > <input type="checkbox"/> 音乐</label>

5.单选多选按钮默认选择 checked ，属性值和属性名相同

5.1 , checked 单选和多选，js中得到选中状态，是获取 inp[0].checked 获取的值为true和false

属性type类型 常用的8个

1.text 文本

2.button 按钮

3.password 密码

4.radio 单选

5.checkbox 多选

6.file 上传

7.reset 重置

8.submit 提交

    搜索<input type="text" name="wd">
    密码<input type="password" >
    <!-- 单选框必须要有相同的name值，否则功能失效 -->
    单选<input type="radio" name="sex" >男
    <input type="radio" name="sex" >女
多选<input type="checkbox">男
<input type="checkbox">你好
<input type="checkbox">男
上传<input type="file">文件

重置<input type="reset"> 提交<input type="submit" value="提交按钮">

按钮<input type="button" value="按钮">

​

搜索 密码 单选男 女 多选男 你好 男 上传文件 重置 

​

</form>

select 选择框（下拉框）

下拉选框 option 子便签 ​ 属性 selected 默认选择 ​

<form action="">
    城市
    <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>

<option value="" selected="selected">南昌</option> ​ <option value="">深圳</option>

textarea 文本域

右下角不允许缩放

resize:none；

--> ​ <!-- ​ cols属性表示设置字节数，rows属性表示设置行数 ​ -->

 评论 <textarea name="" id="" cols="30" rows="10"></textarea>

<!-- 实际开发中常用css设计宽高 -->

 评论 <textarea style="width: 300px;height: 300px;"></textarea>