HTML校企合作粗略笔记

最新推荐文章于 2024-07-19 15:50:46 发布

艾米莉亚小汉堡

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量92

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/qq_18827959/article/details/118556769

版权

常用编辑器

常用:VScode,Hbuilder,DW，记事本

什么是HTML

超文本标记语言

经常使用的

超链接

< a href=“地址”></ a>

小提示标签

< title></ title>

图片

< img src=“地址”>

注意：这里img是单标记标签不需要/img

图片情况三类

图片与网页同级地址可以直接写上图片的全部名称包括后缀名（也可以./图片名字 ·是当前文件夹）
图片所在的文件夹与网页同级，地址需要写上文件夹的名字然后再加上图片全称
图片在网页的上一级文件夹可用…/图片名字

单标记

img

br 回车

hr 划线

双标记

超链接< a>

属性

href 指定地址

target =“_blank” 另从网页打开

name:定义名字

属性的应用

href="#"刷新

href="#[id]"跳转到

id为标签的id以及其他的name

href="66.html#[id]"跳转到66网页的标记处

列表ul(li) ol(li) dl(dd,dt)

表格table

tr td th

tr：编辑行的需要与td一起用

属性

align:对齐属性

border:设置边框

width、heigh:基础属性

clospan:合并列两个口合成一个口

rowspan:合并行吕合成口

悬浮文本title

可用于img（图片）中

head中

ul列表

无序号排列

< ul>

< li></ li>

</ ul>

注意ul只能和li关联!

ol列表

< ol></ ol>

中间也是用li

dl列表

< dl>

< dd>

< dt></ dt>

</ dd>

</ dl>

格式如上

table表格

表格由三部分组成

表头：thead
表内容:tbody
表尾:tfoot

其他

br:回车<>

hr:划线<>

表单form

用于收集用户信息

常见

用户名:
密码:
性别:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--收集用户信息-->
	<body>
		<form action="" method="">
			用户名:<input type="text" id="" value="" /><br>
			密码:<input type="password" name="" /><br>
			<!-- name 设置一样达到二选一甚至是多选一的互斥-->
			性别:<input type="radio" name="sex" id="" value=""checked/>男
			<input type="radio" name="sex" id="" value="" />女
			<br>
			<!--复选框能多选-->
			爱好:<input type="checkbox" name="" id="" value="" />编程
			<input type="checkbox" name="" id="" value="" />吃饭
			<input type="checkbox" name="" id="" value="" />玩游戏
			<br>
			所在城市:
			<select name="">
				<option value="">北京</option>
				<option value="" selected="selected" disabled="">请选择城市</option><!--默认选择因为 selected="selected"disabled是不能选择-->
				<option value="">广州</option>
			</select>
			<br>
			<!--上传文件-->
			上传头像<input type="file" name="" id="" value="" />
			<br>
            		<!--按钮-->
		<!--点击按钮执行一些逻辑语句，逻辑自定义配合js-->
		<input type="button" name="" id="" value="hello" />
		<br>
		<!--重置按钮-->
		<input type="reset" name="" id="" value="重来" />
		<br>
		<!--提交按钮-->
		<!--把表单数据提交到一个地址-->
		<input type="submit" name="" id="" value="提交" />
		<br>
		自我介绍:
		<br>
		<!--cols多少行  rows多少列-->
		<textarea rows="" cols=""></textarea>
	</form>
</body>

学习

text：文本框
password:加密文本框
radio:单选框
checkbox：复选框

属性:checkered就是默认选择
select :下拉框

< option>内容</ option>

属性:selected="selected"默认选择

disable不可选中
button:按钮

另类按钮: reset重置

submit提交按钮
textarea:文本域

属性：

rows是行

cols是列
file：上传文件

表单的补充

<from action="这里是表单提交到的地方" method="这里是提交方式">

action的作用

method的作用

<input type="image" scr="">

图片提交和submit（提交按钮）

几个补充属性

name:想把数据提交到服务器就需要设置name

placeholder:事项搜索框里面的内容自动消失在Vuls…里面输入显示内容

maxlength:能够写入的最长长度!

CSS是什么

层叠样式表—用于美化页面

书写位置

行内样式:

在标签里面加入style的属性然后

例如字体大小 style=“font-size=6px”

内嵌式:

一般写在head里面

<style>
    div{
         font-size:6px;
    }
</style>

格式

外联式

把CSS单独的放在一个后缀名为.css的文件里定义
```
div{
	 font-size:6px;

}
```
直接用选择器就行

但是需要注意的是

需要使用link引入css文件

CSS语法

选择器{

样式属性

}

选择器

标签选择器
```
div{
    
}
```

id选择器

<style>
    #id{
        
        
    }
</style>
<p id="aoligei"></p>

注意的是需要对id的前面需要用**#**引用出

id的属性是唯一的

class(类选择器)
```
.box{

}
```
需要在类的前面加点**·**
通配符选择器
```
*{

}
```
针对全体选择

艾米莉亚小汉堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML校企合作粗略笔记

常用编辑器常用:VScode,Hbuilder,DW，记事本什么是HTML超文本标记语言经常使用的标签< h1>< /h1 >分为等级标签一级标签:h1其他以此类推超链接< a href=“地址”></ a>小提示标签< title></ title>图片< img src=“地址”>注意：这里img是单标记标签不需要/img图片情况三类图片与网页同级地址可以直接写上图片的全部
复制链接

扫一扫