HTML基础

旺仔小秃头ξ( ✿＞◡❛)

已于 2024-03-24 16:51:25 修改

阅读量1.2k

点赞数 34

分类专栏：前端文章标签： html 前端

于 2024-03-24 16:33:59 首次发布

本文链接：https://blog.csdn.net/weixin_61144851/article/details/136989424

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了HTML用于创建网页结构，CSS负责样式设计，JavaScript则提供交互功能。涵盖了标签、元素、属性、嵌套结构、表格、表单控件（如input、select、radio、checkbox等）以及超链接的使用方法。

摘要由CSDN通过智能技术生成

html 作用：结构（独立空间）整体框架
css 作用：样式
javascript 作用：提供交互能力

html(hyper text markup language超文本标记语言)

<html>	
	<head>	
	</head>		  
    <body>
		<img>
		<input>			
	</body>
</html>

分类：

供显示的标签（元素）
供收集用户信息的标签（元素）

快捷键：

英文! 写html框架
书写标签名称即可生成标签
{} 书写html内容
{}*n 批量生成多个内容
生成不同的标签例：div+span
> 大于号生成下一个标签
$ 占位

标签：

h1~h6 字体会自动加粗变小
p p标签会在后边加空格
div div单纯换行
a 超链接标签

标签属性：

href：设置跳转页面的资源路径

target:设置跳转方式其值：_self(本窗口，默认) _blank(新窗口) _parent(跳出父级窗口) _top(跳出顶级窗口),自定义窗口

name:设置锚点名称

img 图片标签

标签属性：

src：设置图片资源路径相对路径和绝对路径

alt：设置图片描述信息

width：设置图片宽度

height：设置图片高度

尺寸一般建议使用单方向设置，保证尺寸不变形

table 表格标签

标签属性：

border：设置表格标签

cellpadding：设置单元格的填充

cellspacing：设置之单元格间的间距

align：设置表格整体对齐方式，其值有right、left、center

width：设置表格宽度

子标签

行标签 tr

标签属性：

width：设置行的宽度，很少用
align：设置行中单元格的对齐方式，其值有right、left、center

单元格标签 th

标签属性：

width：设置行的宽度
align：设置单元格的对齐方式，其值有right、left、center
colspan:设置合并列(比如一周都没有早八)
rowspan：设置合并行（比如周六一天都没有课）

caption 标题标签

列表标签

1. 有序列表 ol

标签属性：
        1. type 有序的类型
        2. start有序的开始值

子标签 li
>         ```
>         <ol>
>            <li>
>         </ol>
>         ```

2. 无序列表 ul

子标签 li

3. 描述列表

子标签 dt dd（标题+）

col     虚拟列（单标签，不闭合·）

span：合并列

标签属性：
        1.src：设置嵌套页面的资源路径
        2.frameborder：设置嵌套窗口边框
        3.width:设置嵌套窗口宽度
        4.height:设置嵌套窗口高度
        5.name:设置嵌套窗口名称

       <ul>
            <li>
                <a href="../123.html" target="oo">孔雀东南飞</a>
                <a href="https://taobao.com" target="oo">淘宝</a>
                <a href="https://chem.hbu.cn" target="oo">化学学院</a>
            </li>
        </ul>

        <iframe src="" name="oo"></iframe>

供收集用户信息的标签

form：表单标签(input、fieldset、select都要写在form中)
fieldset：与legend一起用，起到分割作用

<fieldset>
   <legend>父亲信息</legend>
</fieldset>

select：下拉框

<select name="" multiple>
<!--multiple多选，size="5"下拉框显示数-->
    <optgroup label="文科"> 
    	<option value="">语文</option>
   		<option value="">英语</option></optgroup>
  	<optgroup label="理科">  
    	<option value="">数学</option>
	</optgroup>
</select>

input：输入框

标签属性：

        type：类型

        name：控件名称

        value：控件值

包括：

单行文本框 text

密码框 password

单选框 radio

复选框 checkbox

文件上传器 file

隐藏域 hidden

日期时间控件(日期控件、周控件、月控件)

滑块控件 range

数字控件 number

按钮（submit提交、重置reset、普通button）

<form action="">
     <input type="text" name="" id="" value="ssd">
     <br><input type="password" name="" id="">
     <br><input type="radio" name="12" id="">
     <br><input type="radio" name="12" id="">
     <br><input type="radio" name="12" id="">
     <br><input type="checkbox" name="" id="">
     <br><input type="checkbox" name="" id="">
     <br><input type="checkbox" name="" id="">
     <br><input type="file" name="" id="">
     <br><input type="hidden" name="" id="">
<!--日期时间控件-->
     <br><input type="datetime-local" name="" id="">
     <br><input type="date" name="" id="">
     <br><input type="week" name="" id="">
     <br><input type="month" name="" id="">

     <br><input type="range" name="" id="">
     <br><input type="number" name="" id="">
     <br><input type="submit" name="ok" id="">
     <br><input type="reset" name="reset" id="">
     <br><input type="button" name="btn" id="">
</form>
补充：range和number特有属性min、max、value、step
    <br><input type="number" name="" id="" min="0" max ="78" step="5">
<!--step 步长 每次变化长度-->