HTML与CSS

seaeress

已于 2023-01-09 22:31:22 修改

阅读量166

点赞数

文章标签： html css python

于 2022-10-23 16:02:32 首次发布

本文链接：https://blog.csdn.net/seaeress/article/details/127467486

版权

HTML(HyperText Markup Language)

什么是html？
超文本标记语言，使用协议为 http超文本传输协议

HTML的主体标签

<!DOCTYPE html>  #H5的头   声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">  #之前的头文件 现在不用
<html>
<head>
	<title>标题内容</title>
  	<meta charset="UTF-8">  #设置字符集
</head>
<body>
  	放html的主体标签
</body>
</html>

"""
html:文件是网页，浏览器加载网页，就可以浏览 
- head:头部分，网页总体信息 
  + title:网页标题
  + meta：网页主体信息，会根据name(author/description/keywords)
  + link:引入外部文件
  + style：写入CSS
  + script：写入JS
- body:身体部分，网页内容
"""

HTML的标签

单标记/双标记

<br /> <br >  # 单标记
<p>   </p>    # 双标记

文本标签

<div> </div>  # 块标签  作用是设定字、画、表格等的摆放位置
<p> </p>      # 段落标签  自成一段
<h1> </h1>    # 标题标签 字体加粗 自占一行  建议一个页面h1只能出现一次  （h1 - h6）

图片标签

<img /> # 在网页中插入一张图片
'''
+ src： 图片名及url地址 (必须属性)
+ alt: 图片加载失败时的提示信息
+ title：文字提示属性
+ width：图片宽度
+ height：图片高度
'''
# 如果宽和高只给一个，为等比缩放；如果俩个都给， 会按照所给的宽和高来显示

<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />

路径

'''
1.相对路径
   + ./	当前
   + ../     上一级
2. 绝对路径
   + 一个固定得链接地址(如域名)
   + 从根磁盘 一直到你的文件得路径
'''

超链接

<a href="链接地址" title="提示信息" target="打开方式">点击显示得内容</a>

'''
href必须，指的是链接跳转地址

target: 

	   _blank 新建窗口得形式来打开

	   _self      本窗口来打开(默认)

title：文字提示属性（详情
'''

列表

无序列表

<ul>
   	<li> </li>  
</ul>
   <!--
   属性：
   	type 显示得类型
   	square 方形显示
   	disc 默认圆点
   	circle 空心圆
   -->

有序列表

<ol>
    <li> </li>
</ol>
   <!--
   属性 
   	type i a A  
   	start 起始值
   -->

自定义列表

<dl>
    <dt>列表头</dt>
    <dd>列表内容</dd>
</dl>

HTML注释

<!--注释的内容-->

iframe

定义

# iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<iframe src="http://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>

</body>
</html>

table表格

'''
属性：
	+ width 宽
	+ height 高
	+ border 边框
	+ rowspan合并行
	+ colspan合并列
	
标签：
	caption 表格标题
	tr	行标签
	th  列头标签
	td  列标签
'''

例子

<table>
  <caption>我是表格的标题</caption>
  <tr>
    <th>我是表头</th>
    <th>我是表头</th>
    <th>我是表头</th>
  </tr>
  <tr>
    <td>我是单元格</td>
    <td>我是单元格</td>
    <td>我是单元格</td>
  </tr>
</table>

form表单

<form>  </form>

# 属性
'''
action	提交的地址
method	提交的方式
	get
		(1) 默认不写 为get传参  url地址栏可见
		(2) 长度受限制 （IE浏览器2k火狐8k）
		(3) 相对不安全
	post
		(1) url地址栏不可见 长度默认不受限制
		(2) 相对安全
'''

# 标签
'''
input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值
<input type="text" name="username">
'''

# select标签创建下拉列表
'''
name属性 :定义名称,用于存储下拉值的

<option>内嵌标签：

属性：
+ value属性:下拉项的值
+ selected属性:默认下拉指定项.
'''

# textarea 多行的文本输入区域
'''
属性：
+ \ name :定义名称,用于存储文本区域中的值。
+ cols ：规定文本区内可见的列数。
+ rows ：规定文本区内可见的行数。
'''

# input 标签
'''
type属性:表示表单项的类型,值如下:
+ text:单行文本框
+ password:密码输入框
+ checkbox:多选框 注意要提供value值
+ radio:单选框   注意要提供value值
+ file:文件上传选择框
+ button:普通按钮
+ submit:提交按钮
+ reset:重置按钮, 还原到开始(第一次打开时)的效果
'''

<form action="">
    <p>用户名：<input type="text" name="whw"></p>
    <p>密码:<input type="password" name="123456"></p>
    <p><input type="submit" value="login"></p>
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上哈</option>
        <option value="">京</option>
    </select>
    <textarea name="12" id="" cols="">+++</textarea>
    <p>text:<input type="text"></p>
    <p>pwd:<input type="password"></p>
    <p>file<input type="file"></p>
    <p>d<input type="button"></p>
</form>

HTML中HEAD头部设置

<!--设置网页编码-->
<meta charset="utf-8"/>

<!--网页标题-->
<title>本网页标题</title>

<!--导入CSS文件-->
<link type="text/css" rel="stylesheet" href=".css"/>

<!--CSS代码-->
<style type="text/css">嵌入css样式代码</style>
 
<!--JS文件或代码-->
<script>。。。</script>

CSS

'''
Q:什么是CSS？
A:层叠样式表

Q:CSS的命名规则？
A:使用字母、数字或下划线和减号构成，不要以数字开头

Q:CSS的格式？
A:选择器{属性:值;属性:值;属性:值;....},其中选择器也叫选择符

Q:CSS中如何注释？
A:/* ... */
'''

在HTML中如何使用css样式（html中嵌入css的方式）

内联方式（行内样式）

'''
在HTML的标签中使用style属性来设置css样式
特点：仅作用于本标签
格式： `<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>`

 <p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
'''

内部方式（内嵌样式）

'''
在head标签中使用`<style type="text/css">....</style>`标签来设置css样式
特点: 作用于当前整个页面
'''

<style type="text/css">
 	....css样式代码
 </style>

外部导入方式（外部链入）

'''
（推荐）在head标签中使用`<link/>`标签导入一个css文件，在作用于本页面，实现css样式设置
还可以使用import在style标签中导入css文件
特点：作用于整个网站
'''

<link href="文件名.css" type="text/css" rel="stylesheet"/>

css2的选择符

html选择符（标签选择器）

'''
把html标签作为选择符使用
 如 p{....}  网页中所有p标签采用此样式
'''

h2{....}

class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

'''
定义：.类名{样式....}    匿名类

其他选择符名.类名{样式....}
使用：`<html标签 class="类名">...</html标签>`
注意：类选择符可以在网页中重复使用
'''

.mc{color:blue;}     /* 凡是class属性值为mc的都采用此样式 */
p .ps{color:green;}  /* 只有p标签中class属性值为ps的才采用此样式*/

Id选择符(ID选择器)

'''
定义： #id名{样式.....} 
使用：`<html标签 id="id名">...</html标签>`
注意：id选择符只在网页中使用一次
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
'''

关联选择符（包含选择符）

# 格式： 选择符1 选择符2 选择符3 ...{样式....}

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

组合选择符（选择符组）

# 格式： 选择符1,选择符2,选择符3 ...{样式....}

h3,h4,h5{color:green;}  /*h3、h4和h5都采用此样式*/

<head>
    <meta charset="UTF-8">
    <title>whw</title>
    <style>
        /*HTML 选择器 以html名称作为选择器*/
        h1{
            color: red;
        }
        /*使用class 类选择器  .名称*/
        .c_h1{
            /*设置底部划线 2像素 绿色*/
            border-bottom: 2px solid green;
        }
        /*id 选择器 标签设置id 使用#id名称*/
        #c_id{
            /*设置大一点的字体*/
            font-size: 90px;
        }
        /*优先级 id>class>html选择器 如果选择相同，就近原则*/
    </style>
<!--    外部 导入-->
    <link rel="stylesheet" href="du.css">
</head>
<body>
<!--<p style="color: red;">all is well</p>-->
<h1 class="c_h1" id="c_id" style="color: aqua">hello</h1>
<ol type="a">
    <li>123</li>
    <li>123</li>
</ol>
</body>

CSS3中的选择器

关系选择器

'''
div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p
'''

属性选择器

'''
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
'''

CSS中常用的属性

color颜色属性

{color:red;}

字体属性： font

'''
font
 *font-size: 		字体大小：20px，60%基于父对象的百分比取值
 *font-family：	    字体：宋体，Arial
 *font-weight：   	字体加粗 ：bold
'''

文本属性

'''
*text-align: 	文本的位置：left center right
*text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
*line-height：行高
*color： 字体颜色
'''

背景属性：background

'''
+ background-color: 背景颜色
+ background-image: 背景图片
'''