Web前端

最新推荐文章于 2024-10-10 20:59:20 发布

徐照宇

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量106

点赞数

文章标签：前端

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

版权

本文介绍了HTML的基本结构和常用标签，如标题、段落、链接、图像、表格以及音频和视频元素。此外，还讨论了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-RsnVi8iB-1688996559992)(C:\Users\徐照宇\Desktop\云计算笔记\笔记图片\4a4bb46d5cd22723c9be8b770bc8fe5.jpg)]

iframe框架

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

特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-prfZ49l3-1688996559993)(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-XQKrRgur-1688996559993)(C:\Users\徐照宇\Desktop\云计算笔记\image-20230707205435791.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPW59sYE-1688996559993)(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-upNLntcI-1688996559994)(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-Rrw3sjC7-1688996559994)(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>

伪类选择器

<style>
a:link {
I01213247526118Z920吧d24322
color: pink;
a:visited {
color:red;

/鼠标悬停
a;hover 
{
/cursor--鼠标样式
cursor: cell;
font-size: 40px;
}
a:active {
font-size: 70px;
}

结构伪类选择器

父元素 子元素:nth-child(n):父元素第n个子元素

伪元素选择器

元素::before或after{
content:"~"(必须要有)
}

文本相关样式

首行缩进

<style>
div{
text-indent: 2em;
</style>
</head>
<body>
<div>我是一段文字的世界杯的农村的热练程度才能打开CDC你你你你你你靠靠靠靠靠靠靠靠靠靠靠靠靠</div
</body>

文本水平对齐方式

text-alien:center

list

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

元素显示模式

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

背景

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

五彩导航栏

悬停样式
.one:hover{
backgroud-image:url()
color
}

边框

border-width
border-style(样式)
border-color
border-raius:50%(边框弧度)
border-top-left-radius:40%

阴影

box-shadow

轮廓线

outline:none

防拖拽

防止文本拖拽 */
resize: none;
/* vertical-align改变与文字对齐方式
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

绝对定位

position:absoulute
top:600px
子绝父相
父亲没有相对定位，继续向上找，谁有相对定位，以谁为参考移动
都没有则相对浏览器定位

固定定位

position:fixed
相对于可视区域定位

粘性定位

position:sticky(粘在屏幕上)

95)]

五彩导航栏

悬停样式
.one:hover{
backgroud-image:url()
color
}

边框

border-width
border-style(样式)
border-color
border-raius:50%(边框弧度)
border-top-left-radius:40%

阴影

box-shadow

轮廓线

outline:none

防拖拽

防止文本拖拽 */
resize: none;
/* vertical-align改变与文字对齐方式
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

绝对定位

position:absoulute
top:600px
子绝父相
父亲没有相对定位，继续向上找，谁有相对定位，以谁为参考移动
都没有则相对浏览器定位

固定定位

position:fixed
相对于可视区域定位

粘性定位

position:sticky(粘在屏幕上)

徐照宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Web前端

web笔记

html 超文本标记语言

骨架

UTF-8

title

快速生成

注释

标题标签

段落标签

换行标签 水平线

文本格式化标签

无语义标签

图片标签

视频

音频标签

链接标签

锚链接

有序列表

无序列表

自定义列表

iframe框架

特殊字符

表格标签

单元格合并

details

tabindex

表单的基本结构

表单常见元素

html的全局属性

h5表单

css体验

css三种引入方式

内部样式

行内样式(不推荐)

外部样式(推荐)

基本选择器

标签选择器

id选择器

类选择器

通配符选择器

包含选择器

子代选择器

后代选择器

字体样式

复合选择器

属性选择器

文本外观

伪类选择器

结构伪类选择器

伪元素选择器

文本相关样式

首行缩进

文本水平对齐方式

list

元素显示模式

背景

五彩导航栏

边框

阴影

轮廓线

防拖拽

绝对定位

固定定位

粘性定位

五彩导航栏

边框

阴影

轮廓线

防拖拽

绝对定位

固定定位

粘性定位

换行标签水平线