前端，第六九天

最新推荐文章于 2024-05-03 17:58:21 发布

十八岁的有德

最新推荐文章于 2024-05-03 17:58:21 发布

阅读量266

点赞数

文章标签：前端 css html5 h5

本文链接：https://blog.csdn.net/weixin_42157426/article/details/81291276

版权

HTML一、HTML基本语法1.html标签3.属性属于标签4.语法规范5.注释6.常用HTML实体二、HTML常用标签1.主体结构2.HEAD标签3.格式排版标签4.文本标签三、css基本语法1.使用css2.格式3.注释4.css长度单位5.css颜色单位四、css选择器五、选择器优先级六、css常用属性1.文字颜色2.文本属性3.补充七、CSS属性—尺寸、边框、背景1.尺寸2.边框3.背景4.CSS Sprite(精灵图)5.超链接6.鼠标属性7.锚点8.UL解析9.图片10.图片映射八、列表九、表格十、表单十一、音频和视频

复习资料网址：http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html

HTML

一、HTML基本语法

1.html标签

单标签<img />, <img>
双标签<html>, </html>

3.属性属于标签

  <img src="图片的地址">
  <table width="100" height="200"></table>

4.语法规范

标签嵌套用缩进
标签名不区分大小写(建议小写)
属性名不区分大小写(建议小写)

5.注释

  <!-- 单行 -->
  <!--
  多行
  -->

6.常用HTML实体

  空格 non-break space
< < less-than
> > greater-than
& & ampsand
© 版权 copyright
¥ 人民币 yen(日元)

二、HTML常用标签

1.主体结构

<html></html>
<head></head>

<body></body>

  <!DOCTYPE html>
  <html>
      <head>
          <title></title>
      </head>
      <body>
      </body>
  </html>

2.HEAD标签

<title></title> 网站标题

  <!-- 指定网页标题 -->
  <title>同志交友</title>

<meta> 指定网页的元信息指定关键字指定描述指定字符集

属性:charset, name, content

  <meta charset="utf8">
  <meta name="keywords" content="同志交友,交友平台,同志,同志相亲">
  <!-- 添加网页的具体描述信息 -->
  <meta name="description" content="全国最大的同志交友平台">

<style></style> 设置标签格式

  <!-- 设定网页h1标题的颜色为红色 -->     
  <style type="text/css">
              h1 {
                  color: red;
              }
          </style>

<link> 导入css或者指定网页图标

属性:src, type, rel

  <!-- 导入01.css文件中的css代码，name和type固定格式 -->
  <link rel="stylesheet" type="text/css" href="./01.css">
  <!-- 指定网页的图标是friends.ico这种类型的图片,name和type固定格式  -->
  <link rel="shortcut icon" type="image/x-icon" href="./friends.ico">

<script></script>导入javascript

3.格式排版标签

<hn></hn>1~6标题 headline

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

<p></p>段落 paragraph
```
  <p>段落</p>
```

<pre></pre>原样输出 pre process

  <pre>输入什么输出就是什么,换行也能显示</pre>

<br>换行 break

  <br>如果用了p标签,那么我就能在p标签里起着换行的作用

<hr>分隔 horizontal

  <hr>如果用了hr标签,那么会有一条分割线

<div></div>没有任何语意的标签(分开)

  <div>我可以把这里面的代码分隔开</div>

4.文本标签

<em></em>强调表现为斜体

  <em>文字左右两侧加上我就变斜体了</em>

<strong></strong>强调表现为粗体

  <strong>文字左右两侧加上我就能变粗体</strong>

<mark></mark>H5新增表示被选择

  <mark>文字左右两侧加上我就能被特殊标记</mark>

<sup></sup>上标

  <sup>文字左右两侧加上我就能有上标,例如100的平方</sup>

<sub></sub>下标

  <sub>文字左右两侧加上我就能有下标,例如水的化学表示</sub>

<ins></ins>添加的内容

  <ins>文字左右两侧加上我就能有下划线显示他是被添加的内容</ins>

<del></del>删除的内容

  <del>文字左右两侧加上我就能有穿过文字的线</del>

<ruby></ruby>/<rt></rt>加拼音 H5新增

  <!-- 同志就变成了小学里学的头顶有拼音的同志 -->
  <ruby>
      同志<rt>tongzhi</rt>
  </ruby>

三、css基本语法

1.使用css

link引入外部的css文件
<style></style>在html中写
使用html元素的style属性

2.格式

  选择{
      css属性:值;
      css属性:值;
  }
  选择器 {属性:值;属性:值}

3.注释

  /* */

4.css长度单位

  px 像素
  em 默认大小的倍数,字体默认大小16
  % 默认大小参照,50%代表全屏长度的50%
  cm 厘米
  mm 毫米
  pt 用于印刷业

5.css颜色单位

  colorName：  red/green/bue/purple/orange/yellow/pink/skyblue
  
  rgb数字  rgb(34,45,23)  rgb(20%, 57%, 100%)
  
  16进制   #abcdef   #f90   #ccc

四、css选择器

  # 标签名选择器（HTML元素选择器）
  tagName{
  
  }
  
  # 类名选择器
  .className{
      
  }
  
  # ID选择器
  idName{
      
  }
  
  # 全局选择器
  * {
      
  }
  
  # 组合 后代元素 # 通过混用两个选择器（ID选择器、标签名选择器、类名选择器）定位到一个含有某些特定属性的标签
  选择器 选择器
   .nav li {}
   #box div {}
   div .list {}
   .container li {}
  
  # 组合 子元素 # 挑选出某个选择器下大于另一个选择器的一个标签
  选择器>选择器
   .nav>li {}
   #box>div {}
   div>.list {}
   .container>li {}
  
  # 群组
  选择器,选择器,选择器 # 通过混用多个选择器精确定位到一个含有某个特征的选择器
   }
  
   body,ul,li,p,figure,table,.item,.list-item {
  
   }
  
  # 多条件 # 通过混用多个选择器精确定位到多个含有某个特征的选择器
   div.item {
  
   }
   .item.list-item {
  
   }
   div#container {
  
   }

五、选择器优先级

  ID > CLASS > tagName > *
  
  组合选择器,通过数数来判断:
  计算 选择符 中ID的数量(=a)                    
  计算 选择符 中 类选择器 属性选择器 伪类选择器 的数量(=b)    
  计算选择符 中 标签选择器 伪对象选择器的数量 (=c)        
  忽略全局选择器                            
  a的权重100  b的权重10   c的权重1    相加

六、css常用属性

font

  font:字体风格[字体加粗[<字体大小>[/行高]<字体族科>
  # 字体大小和字体族科必须得有

font-family 字体族科宋体(衬线字体)|微软雅黑(非衬线字体)

  font-family:"Arial",sans-serif;
  # serify 衬线字体;sans-serif 非衬线字体
  # 如果系统中不自带Arial字体,浏览器会自动选择非衬线字体

font-size 字体大小
font-style 字体风格 normal | italic | oblique (斜体,一般用于italic)
font-weight 字体加粗 normal | bold | lighter (加粗,一般用bold)
font-cariant 字体变形 normal | small-caps (字体比原来字体小,适用于英文大写字母)

1.文字颜色

color 设置文字颜色

2.文本属性

letter-spacing 字母间隔值为长度,可以是负值(可适用于中文)
word-spacing 词的间距(通过空格识别)

text-decoration 文字修饰

  underline # 下划线
  overline # 字符头顶的上划线
  line-through # 穿过字符的线
  none(默认)

text-align 横向排列 left | right | center # 字体位置
vertical-align 一般用于图片和文字, 使用middle后文字能在图片长度的中间
text-indent 文本缩进一般用2em(2个字)50px
line-height 设置行间距离,如果只有一行文本并且行间距离=设置的文本框长度,则文本会垂直居中

word-wrap normal | break-word

在长单词和url地址内部进行换行,如果不使用,长单词或者url长度超过文本框长度,超出的部分会超出文本框

overflow-wrap CSS3中新增的，等同于word-wrap

white-space nomal | pre | nowrap | pre-wrap | pre-line

一般用pre和pre-wrap,pre是原生字符的意思,换行之类的也会显示,但是文本超过文本框不会换行;pre-wrap则会强制换行

3.补充

div之类的标签默认宽度会随着父类body标签的父类标签html标签宽度的变化而变化 2. em之类的标签的宽度随着修改文本的宽度变化而变化

七、CSS属性—尺寸、边框、背景

1.尺寸

width 宽度

min-width（最小宽度，如果不设置默认宽度，宽度会满屏） max-width（最大宽度）# 不推荐使用

height 高度

min-width（最小高度，如果不设置默认高度，高度会满屏） max-width（最大高度）# 不推荐使用

2.边框

boder:风格 | 颜色 | 宽度

boder-style:solid(实现) | dashed(虚线) | double(双实线) | dotted(点线)

boder-color:#fff

boder-width:npx(一般1/2)

padding: left | right | top | bottom

		npx(n代表上下左右)

		apx bpx(a代表上下,b代表左右)

		apx bpx cpx(a代表上,b代表左右,c代表下)

		apx bpx cpx dpx(a代表上,b代表右,c代表下,d代表左)

3.背景

background:color | url | repeat | ...

background-color:颜色

background-image:

	url("")

	repeat(平铺) | no-repeat(不平铺) | repeat-x(水平平铺) |repeat-y(垂直平铺)

background-position(背景图片位置):left | right | center | top

background-attachment(背景图片相对于屏幕固定):fixed(固定在屏幕中间) # 相当于滚动网页可以查看未直接显示图片

4.CSS Sprite(精灵图)

button双标签

先用markman量出我们想要图片尺寸,再用button标签添加该图片,之后加上a链接标签,用上background-position修改图片位置

补充:使用精灵图的原因是因为,每个图片下载一次很浪费时间,因此直接下载一张图片,该图片内包含很多字图片,我们通过精灵图的方式去一一获取需要的图片,减少网络请求次

5.超链接

a双标签

herf:url

target:_blank(打开子窗口,即新的浏览窗口)

title:点击a标签会在a标签形成的东西中显示该东西的名字

download:可以直接下载a标签内的东西 # 可以直接写属性名,不用赋值

补充:如果浏览器无法识别会自动下载该文件

特殊超链接:

打开网页:href="http:www.jiaoliu.com"
发邮件:href="mail to:1171958281@qq.com"
打电话:href="tel:15306815606"
发短信:href="sms:15306815606"

6.鼠标属性

cursor属性

pointer(手) | move(移动) | wait(等待) | no-drop(禁止)

7.锚点

现在标签内部添加锚点a标签,a标签内用name属性,然后再设置一个a标签做锚,href=name属性

可以在标签内用id代替a标签

href:"#" 代表没找到锚点,会回到顶部
href为空代表重新加载该网页

8.UL解析

http://www.baidu.com/path/demo/contents/index.php?a=100&b=300#mao_one

http 协议(protocol)

www.baidu.com 主机名hostname(ip)

/path/demo/contents/ 路径(path)

index.php 文件名filename

?a=100&c=300 查询内容(query)

锚点 #mao1

9.图片

src:url(导入图片)

alt:文本内容(图片丢失了,会在图片页面下显示描述性文字)

title:显示图片的描述信息

usemap:使用图片映射

10.图片映射

shape：rect(矩形) | poly(多边形) | circle(圆形)
coords:矩形(左上角x,y轴和右下角x,y轴)
	多边形(每个角的x,y轴)
	圆形(圆心x,y轴和半径)

八、列表

无序列表
```
<ul>
	<li> </li>
</ul>
```
默认实心点代表序号
有序列表
```
<ul>
	<ol></ol>
</ul>
```
默认1,2,3...代表序号

ol特有:start(起始值)、type序号的类型("a","A","i","I","1")、reversed降序

定义列表

<ul>
	<dt>主题</dt>
	<dd>描述</dd>
</ul>

列表通用属性:

- list-style-type:circle\square(小方框)\lower-roman\upper-roman\decimal\disc(实心点)
- list-style-position:inside\outside加上表框后序号显示在框内或者框外
- list-style-image:url("")把序列号换成指定的图片
- list-style复合属性:适用于所有类型的列表,会覆盖之前的所有属性一般列表都是用该复合属性的None属性

九、表格

<table>
	<tr>tablerow
		<th></th>tablehead
	</tr>
</table>
<tbody>
	<tr>
		<td colspan></td> 文本
	</tr>
</tbody>
<tfoot>
	<tr>
		<td></td>
	</tr>
</tfoot>

表格通用属性:

- table-layout:auto(默认)\fixed(等宽)
- boder-collapse:seprates(默认,不合并边框)\collapse(合并单元格边框)
- <caption></caption> 给表格添加标题
- caption-side:top(默认)\bottom 标题位置
- empty-cells:show(默认显示空的单元格)\hide
- rowspan:跨行
- colspan:跨列
- rowspan:n colspan:n 跨n行,跨n列

十、表单

<form></form>

action:提交的地址

method:提交的方法

enctype:编码类型

文本输入框

用户名:<input type="text" name placeholder(提示信息) value(提交给服务端的值) max-length(控制输入字符大小)>

密码框

密码:<input type="password" ...同文本框>

单选按钮框

<input type="radio" ...同文本框 checked(默认选中)>

多选按钮框

<input type="checkbox" ...同文本框 checked(默认选中,可以按shift键选中多个)>

文件选择框

<input type="file" ...同文本框 multiple(可选择多个)>

邮箱

<input type="email" ...同文本框> 会进行输入验证是否为邮箱格式

URL

<input type="url" ...同文本框> 会进行输入验证是否为url格式

分数

<input type="number" ...同文本框 max(最大数字) min step(默认为1,为1时数字只能是1的倍数)>

搜索框
```
<input type="search" ...同文本框>
```

电话号码

<input type="tel" ...同文本框> 在手机端会弹出数字输入框,文本框无特殊效果

范围选择

<input type="range" ...同文本框 max(最大数值) min>

颜色选择
```
<input type="color" ...同文本框>
```

时间日期

<input type="datetime"(日期时间)\"date"(日期)\"year"\"month"\"week"\"time"(无秒) ...同文本框>

下拉选项

<select name="">
	<option value=""(提交给服务器的值) selected(被选择的)>文本</option>
	<option value="" selected(被选择的)>文本</option>
	<option value="" selected(被选择的)>文本</option>
</select>

多行文本输入

<texarea name="" rows=""(指定多少行) cols=""<指定一列多少字符,超过该字符数自动换行> max-length=""(指定一次输入最大字符数) ...同文本框></texarea>

按钮

提交按钮

<input type="submit" value>
<button>提交</button> 有默认type="submit"

重置按钮

<input type="reset" value>
<button type="reset">重置</button>

普通按钮(无语义)

<input type="button" value>
<button type="button">普通按钮</button>

form内置标签

<fieldset>
	<legen>注册</legend>
</filedset> 生成一个方形注册框
<datalist id="mylist">
	<option value></option>
	<option value></option>
	<option value></option>
</datalist>

表单控件相关属性

enable 可用 (默认)
disable 禁用 (不可写)
readonly 只读 适用于可输入表单
autofocus 自动获取焦点
autocomplete:on\off 提交成功是否保存填的信息
required 有这属性必须得填
pattern 正则匹配 适用于可输入表单
title 提示信息

十一、音频和视频

音频

<video src controls(播放) autoplay(自动播放) preload(预下载) loop poster(自己为视频加个封面图片)></video>

视频

<audio src controls ...同视频></audio>

另一种写法

<video>
	<source src type ...同视频>
</video>

<audio>
	<source src type ...同音频>
</audio>

十八岁的有德

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端，第六九天

目录HTML一、HTML基本语法1.html标签3.属性属于标签4.语法规范5.注释6.常用HTML实体二、HTML常用标签1.主体结构2.HEAD标签3.格式排版标签4.文本标签三、css基本语法1.使用css2.格式3.注释4.css长度单位5.css颜色单位四、css选择器五、选择器优先级六、css常用属性1.文字颜色2.文本属性3.补充七、CSS属性—尺寸、边框、背景1.尺寸2.边框3...
复制链接

扫一扫