Web前端笔记

最新推荐文章于 2024-11-15 13:54:42 发布

徐照宇

最新推荐文章于 2024-11-15 13:54:42 发布

阅读量73

点赞数

文章标签：前端笔记

本文链接：https://blog.csdn.net/weixin_75048993/article/details/131604983

版权

本文介绍了HTML的基本结构和常用标签，包括标题、段落、图像、链接、表格等元素，以及CSS的引入方式和基本选择器，用于网页样式设计。还提及了H5新增的表单类型和CSS的文本外观等概念。

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

web笔记

html 超文本标记语言

超：超链接，能从一个网页跳转到另一个网页

骨架

<html>

<head>
</head>


<body>

</body>

</html>

标签可以嵌套

<开始标签>标签体（内容）</结束标签>

属性名=“属性值”

若属性名与属性值相同，可以只写属性名

UTF-8

万国码，包含世界上所有文字与符号（一般不变）

title

<title>  标题  < /title>

更改网页标题

快速生成

英文模式下,输入！可快速生成骨架

注释

<!--  注释 /-->

对代码进行解释

快速生成：ctrl+/

标题标签

<h1>标题</h1>>

一共有六级，h1到h6逐渐变小

段落标签

<p> 段落 </p>

段落与段落间有空行分段

换行标签水平线

换行 <br />

换行中间无空行

水平线 <hr/>

文本格式化标签

加粗：<strong>   </strong>或<b>  </b>
倾斜：<em>  </em> 或 <i>  </i>
删除线：<del>  </del> 或 <s>  </s>
下划线：<ins>  </ins>或<u>  </u>

无语义标签

 块元素：内容独占一行：<div>  </div>	宽高内边距可以设置
行内元素：一行多个内容：<span>  </span> 不可以设置宽高内边距

图片标签

<img src="" alt="">
src:指向图片位置（网络本地都可）
alt：图片地址发送错误时，用来提示的字

视频

<video> src="" </video>
controls:控制模块
loop：循环播放
autoplay：视频自动播放(谷歌浏览器默认不允许自动播放，IE自动播放)
muted：静音
poster：等待加载时显示的图片

音频标签

<audio src=""> </audio>
与视频类似

链接标签

<a href="目的链接"target="">  </a>
target默认self(自己)
blank 打开新页面
<a href="目的链接"target=""> <img src="" alt=""> </a> 网页加载失败时放的图片

锚链接

<div id="a"> </div>
之后再用链接标签时目的链接使用锚链接可以直接跳转到锚链接处

有序列表

<ol>
	<li>  </li>
	<li>  </li>
</ol>
排序，默认用数字排序 <ol type="A">使用字母排序

无序列表

<ul>
	<li>  </li>
	<li>  </li>
</ul>
排序时默认用实心圆排序 </ul type="circle">使用空心圆

自定义列表

<dt>  </dt>
<dd>  </dd>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbNjkrEc-1688737628572)(C:\Users\徐照宇\Desktop\云计算笔记\笔记图片\4a4bb46d5cd22723c9be8b770bc8fe5.jpg)]

iframe框架

<iframe src="目的" width="" height=""> </iframe>

特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6aVOtQa-1688737628573)(C:\Users\徐照宇\Desktop\云计算笔记\笔记图片\4a4bb46d5cd22723c9be8b770bc8fe5.jpg)]

表格标签

<table border="">		(只控制最外围大小) height,width,cellspacing
<table>
	<caption> </caption>（标题）
	
	<thead>		(表头) 	<thead align="center"(水平居中) valigh="top"(置顶)middle(垂直居中)>
		<tr>   (table rows 表行)  
		<th>  </th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td> </td> (每一列数据)
		</tr>
	</tbody>
	
	<tfoot>		表注
	
	</tfoot>

单元格合并

合并行:rowspan=""
合并列:colspan=""

details

<summary> </summary>:展开详情

tabindex

让本不能tab遍及获取焦点的元素获取焦点
<div tabindex="1">我是第2个盒子</div>

表单的基本结构

表单：网页交互区，收集用户信息
action:将数据交给谁处理
name: 必有属性
method:提交方式
<form action="https://www.baidu.com/s"
	<input type="text" name="wd"
	<button>提交</button>
</form>

表单常见元素

<form action="#"(提交到自己的页面)
	<!-- 文本框 -->
用户名: <input type="text" name="user" value="gouxin"><br />  maxlength=""(最大长度)
	<!-- 密码 -->
密码: <input type="password" name="pwd ">
	<--  单选框  -->	(value必须写)
<input type="radio"name="gender"value="nan">男
<input type="radio"name="gender"value="nv">女

</form>
	<-- 多选框  label标签-->		(value必须写)
<input type="checkboxname="food"id="liulian"<label for="liulian>吃榴</label>
<input type="checkbox” name="food">吃臭豆腐

<input type="checkbox” name="food"checked>吃肥肉  checked默认选中
	<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查"
	<-- 确认按钮 -->
<input type="submit">
	<!--重置按钮 -->
<input type="reset">
	<!-- 普通按钮 -->
<input type="button"<!-- 文本域 -->
<textarea cols="20” rows="10">
<textarea>


	<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<option value="成都">成都</option>
<option value="西安">西安</option>
</select>

html的全局属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1z1IF9RE-1688737628574)(C:\Users\徐照宇\Desktop\云计算笔记\image-20230707205435791.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmQJ8HKP-1688737628574)(C:\Users\徐照宇\Desktop\云计算笔记\image-20230707205521569.png)]

h5表单

属性值					说明
type="email"		限制用户输入必须为Email类型
type=“url"			限制用户输入必须为URL类型
type="date"			限制用户输入必须为日期类型
type="time"			限制用户输入必须为时间类型
type="month"		限制用户输入必须为月
type="week			类型限制用户输入必须为周类型
type="number		限制用户输入必须为数字类型
type="tel"			手机号码
type="search"		搜索框
type="color"		生成一个颜色选择表单

css体验

<style>
div {
	width: 30@px;
	height: 300px;
	background-color: pink;
}
</style>
</head>

<body>
<div>我是盒子1</div>
</body>
</html>

css三种引入方式

内部样式

<style>
.box1{
	width: 300px;
	height: 300px;
	background-color: pink;
	}
</style>
</head>

<body>
<div class="box1">我是盒予</div>
</body>

</html>

行内样式(不推荐)

<body>
	<div class="box1">我是盒子</div>
	<div style="width: 30px; height: 300px; background-color:  green;"></div>
</body>
</htmI>

外部样式(推荐)

<link rel="stylesheet" href="./14-样式.css">

14:
.box2 {
	width: 300px;
	height: 300px;
	background-color: blue;
}

基本选择器

标签选择器

选择网页中所有标签的内容

<head>
<meta charset="UTF-8">
<meta name="viewport” cont
<title>选择器</title>
<style>
p{
color:aqua;
}
</style>
</head>

id选择器

#box{
color:aqua;
}

类选择器

.box2{
color:aqua;
}

通配符选择器

选择所有

*{
background-color:pink;
}

包含选择器

子代选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSUetNOM-1688737628574)(C:\Users\徐照宇\Desktop\云计算笔记\image-20230707212449519.png)]

后代选择器

找到后代所有要找的元素

字体样式

<style>
div {
/*字体大小*/
font-size: 40px;
/* .字体粗细-*/
/*font-weight: bold;*/ 加粗
/*font-weight: 900;*/
/*100-900 400===normal:·800===bold
/*.字体是否倾斜 */
/*font-style: italic/normal;*/
font-family:“微软雅黑";
</style>

复合选择器

选出多个元素加相同样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EoPp68Oc-1688737628574)(C:\Users\徐照宇\Desktop\云计算笔记\image-20230707213544086.png)]

属性选择器

input[type="password"]  寻找type值=passwd的input

[type^="te"]以te开头
[type*="e"]type值包含e的

文本外观

/<style>

p{

    fond-size:20px;

    fond-indent:2em;       em----当前字体大小

}

</style>

font-weight: bold;*/ 加粗
/font-weight: 900;/
/100-900 400=normal:·800=bold
/.字体是否倾斜 */
/font-style: italic/normal;/
font-family:“微软雅黑";


## 复合选择器

选出多个元素加相同样式

[外链图片转存中...(img-EoPp68Oc-1688737628574)]

## 属性选择器

input[type=“password”] 寻找type值=passwd的input

[type^=“te”]以te开头
[type*=“e”]type值包含e的


## 文本外观

fond-size:20px;

fond-indent:2em; em----当前字体大小

}

```