html+css学习过程中一些注意事项

ascii01tyy

于 2020-08-20 13:46:34 发布

阅读量288

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_44204324/article/details/108070470

版权

笔记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

菜鸟教程
1、HTML5 语义元素
语义元素就是 有意义的元素。一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素实例:<div>和<span> 无需考虑内容.
语义元素实例: <form>,<table>and <img> 清楚的定义了它的内容。

区块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>,< p>, <ul>, <table>，<div>
内联元素：内联元素在显示时通常不会以新行开始。比如<b>, <td>, <a>, <img>,<span>
<div>和<span>：<div>元素定义文档区块,经常与 CSS 一起使用，用来布局网页。<span>用于对文档中的行内元素进行组合。

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<!--使用 <span> 元素对文本中的一部分进行着色：-->
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

2、id和class,name的区别
优先级：id>name>class

CSS和JavaScript使用id属性来为唯一元素执行特定任务。在CSS中，id属性使用＃符号后跟id编写。

基本语法：
 
　　HTML中：
 
　　<elementid=“id_name”>
 
　　CSS样式表中：
 
　　#id_name{
 
　　//CSS属性
 
　　}

class属性用于为HTML元素指定一个或多个类名；class属性可用于任何HTML元素。CSS和JavaScript可以使用类名来为具有指定类名的元素执行某些任务。CSS样式表中的类名称使用“.”符号。

基本语法：
 
　　HTML中：
 
　　<elementclass=“class_name”>
 
　　CSS样式表中：
 
　　.class_name{
 
　　//CSS属性
 
　　}

id和class属性之间的区别是：id具有唯一性，在页面里面只能出现一次，最多只能应用于一个元素，不能重复使用。class具有普遍性，在页面里面可以多次出现，应用于多个元素（同一个类名在在页面里面可以多次出现，这样可以重复引用同一个css，减小工作量和代码量。）。

name ：指定标签的名称（不唯一）。主要是用于获取提交表单的某表单域信息，作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、框架元素(iframe、frame、 window的名字，用于在其他frame或window指定target )和button等，这些元素都与表单(框架元素作用于form的target)提交有关，浏览器会根据name来设定发送到服务器的request，在表单的接收页面只接收有name的元素, 所以赋ID的元素通过表单是接收不到值的。

3、一些属性
菜鸟教程：html标签表
<form>标签的所有属性：

所有属性	描述
action	规定用户点击提交按钮时，表单被提交到的位置。
method	规定表单提交时所使用的 http 请求方法，只能是 get 或 post 中的任意一种。
name	定义表单的名称，不能包含特殊字符和空格。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
enctype	规定被提交数据的编码（默认：url-encoded）。
novalidate	规定浏览器不验证表单（不验证数据的有效性）
target	规定 action 属性中地址的目标（默认：_self）。

<input> 标签的一些属性：待补充

属性	描述
type	规定要显示的 <input> 元素的类型。如 button，text,password,radio,checkbox,submit,email,number,image,tel,date,url等等
name	规定<input>元素的名称
id	唯一
value	指定 <input>元素 value 的值
placeholder	规定可描述输入<input> 字段预期值的简短的提示信息。
pattern	规定用于验证 <input> 元素的值的正则表达式。
…	…

菜鸟教程：HTML<input> 标签

4、表单的操作
菜鸟教程–表单和输入

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<select>	定义了下拉选项列表
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果
<optgroup>	定义选项组
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset>元素的标题

<form autocomplete="on">
        Username: <input type="text" name="user">
        submit：<input type="button" value="submit">
</form>

<!--利用label设置input标题-->
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>


<form>
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female
</form>

<form action="">
        <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<textarea rows="10" cols="30"><!--文本框-->
</textarea>

<form action=""><!--必需的 action 属性规定当提交表单时，向何处发送表单数据。下拉列表-->
        <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
        </select>
</form>

<!--下面是一个 <input> 元素，<datalist> 中描述了其可能的值：-->
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

5、如何使用css
html头元素
 html样式
样式优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件（通常用link标签）

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

6、css选择器

id选择器：以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

class选择器：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

标签选择器：

p.center {text-align:center;}

属性选择器
IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

[title] 
{
color:blue;
}
[title=runoob]改变了标题title='runoob'元素的边框样式:
{
    border:5px solid green;
}

[title~=value] { color:blue; }属性中包含独立的单词为 value
[lang|=en] { color:blue; }属性中必须是完整且唯一的单词，或者以 - 分隔开
[title*=value]属性中做字符串拆分，只要能拆出来 value 这个词就行
[lang^=en]属性的前几个字母是en就可以
[attribute$=value]属性的后几个字母是 value 就可以

input[type="text"]表单样式
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}

包含选择器：以下div内的p标签和div外的p标签分别匹配不同的样式。

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
.first span{
  color:red;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

子选择器：如以下div内的p标签匹配样式，div内的table内的p不匹配。

<style>
div>p{
  color:red;
}
</style>

兄弟选择器：A~B{…}，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

7、css中的一些常用设置
菜鸟教程：css参考手册

属性	描述
background	背景属性中有background-color、background-image(背景图像显示，默认是重复平铺)、background-repeat(平铺方式：如repeat-x,no-repeat)、background-attachment(背景图像是否固定，如fixed为固定，默认为scroll即随页面滚动) 、background-position(设置背景图像的起始位置。如right top)、background-origin（指定了背景图像的位置区域，content-box, padding-box,和 border-box区域）、
text	color（文本颜色）、text-align（文本对齐方式，有center、right、left、justify即每一行被展开为宽度相等，左，右外边距是对齐如杂志和报纸）、text-decoration（主要是用来删除链接的下划线即设置为为none，还有underline、overline、line-through）、text-transform（文本转换，主要大小写字母）、text-indent（指定文本第一行的缩进）、letter-spacing（字符间距）、line-height（行间距）、word-spacing（字间距）、text-shadow（文本阴影）
font	font-family (设置文本的字体系列 CSS Web安全字体组合)、font-style（字体样式）、font-size（字体大小）、font-weight（字体粗细）
a	a:link(未访问过的链接)、a:visited（用户已访问过的链接）、a:hover（当用户鼠标放在链接上时）、a:active（链接被点击的那一刻）
所有CSS伪类/元素	常用：before、after、focus等等菜鸟教程：伪元素
列表（ul、ol）	list-style（用于把所有用于列表的属性设置于一个声明中）、list-style-type（指定列表项标记的类型）、list-style-position（列表项标志的位置）、list-style-image（指定列表项标记的图像）
表格	border-collapse（设置表格的边框是否被折叠成一个单一的边框或隔开，一般为collapse）、border（如border: 1px solid black;）菜鸟教程实例
border	border-width（为边框指定宽度）、 border-style(定义边框的样式,如dotted点线边框、dashed虚线边框、solid实线、double两个边框。一般定义顺序（边距设置相同顺序）：1、上右下左，2、上、左右、下，3、上下、左右)、border-color、border-radius（添加圆角）、box-shadow（添加阴影）、border-image（使用图像创建边框）
Display(显示) 与 Visibility（可见性）	visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。其中，display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性菜鸟教程：display
Position(定位)	包括static(HTML 元素的默认值，即没有定位，遵循正常的文档流对象。)、fixed(元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动)、relative(相对定位元素的定位是相对其正常位置做出移动。)、absolute(相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> )、sticky(粘性定位, 基于用户的滚动位置来定位。一般设定top: 0;)
Overflow	overflow 属性只工作于指定高度的块元素上。visible、hidden、scroll、auto、inherit 菜鸟教程：overflow
Float(浮动)	会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。清除浮动 - 使用clear:both;
水平 & 垂直对齐	元素居中对齐（要水平居中对齐一个元素(如 ), 可以使用 margin: auto;）、图片居中对齐（可以使用 margin: auto; 并将它放到块元素中）、左右对齐（1、使用定位方式，如position: absolute;right: 0px;2、使用定位方式）、垂直居中对齐（1、使用 padding，如padding: 70px 0; 2、使用 line-height3、使用 position 和 transform）
导航栏	菜鸟教程：导航栏
下拉菜单	菜鸟教程：下拉菜单
CSS 提示工具(Tooltip)	菜鸟教程：提示工具
图片廊	菜鸟教程：图片廊
图片透明度	如 opacity:0.4;filter:alpha(opacity=40);
CSS 媒体类型	媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。菜鸟教程：css媒体类型
CSS 图像拼合技术	菜鸟教程：图像拼合技术
CSS 表单	菜鸟教程：css表单
CSS3 多列	column-count（指定元素应该被分割的列数。），column-gap（指定列与列之间的间隙），column-rule-style（指定两列间边框的样式），column-rule-width（指定两列间边框的厚度），column-rule-color（指定两列间边框的颜色），column-span（指定元素要跨越多少列）、column-width（指定列的宽度）
CSS3 用户界面	其中box-sizing:border-box;很重要（该属性将border和padding计算入width之内）
CSS3分页	菜鸟教程：css分页
转变、过渡	transform、transition。如transition: width 2s, height 2s, transform 2s;css的Transform详解（转载）
动画	@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。所以先利用@keyframes规定动画的规则（或变化），然后再利用css规定动画的变化过程，比如时间、方向等

8、属性中易混淆的概念

position中relative与absolution的区别
两者区别（转载）
HTML的relative与absolute区别（转载）
通过案例理解position
相对定位元素经常被用来作为绝对定位元素的容器块，当标签有嵌套时，子标签的位置样式设置是相对于父标签的。

如下面两个嵌套的div中的position设置。

<style>
            #div1{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: blueviolet;
				margin-left: 100px;
			}
			#div2{
				margin-left: 100px;
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: red;
			}
</style>
<div id="div1">
			<div id="div2"></div>
</div>

结果图：
在这里插入图片描述

z-index的用处
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。通常一个较大的z-index值的元素会覆盖较低的那一个。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）
CSS深入理解之z-index（转载）
line-height与height
line-heigth是行高的意思，它决定了元素中文本内容的高度，指文本行基线间的垂直距离。height则是定义元素自身的高度。行高等于元素高，可将文本内容垂直居中。

真正的能理解CSS中的line-height，height与line-height（转载）
display:inline-block，inline,block的区别与应用
inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之： inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )。display:flex弹性布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
菜鸟教程：弹性布局
 转载：https://www.cnblogs.com/Ry-yuan/p/6848197.html
内部文字图像的垂直对齐

img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

在这里插入图片描述

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
margin:auto的作用：用来计算元素对应方向应该获得的剩余空间大小。margin:auto与margin: 0 auto区别：margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中。
margin:auto的理解（转载）
vw,vh,rem(自适应布局)
rem的使用方法（转载）

9、网页布局
在这里插入图片描述

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

网页布局实例：菜鸟教程：网页布局

比较实用的功能：
粘性定位：实例
overflow 属性：实例
浮动（多用于图片）：菜鸟教程：css中的float
导航栏：菜鸟教程导航栏

哈哈哈哈哈，才发现有这个表情。😃😃😃，其实总结的还是不全，到时候用了再查呗，就酱:)

ascii01tyy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css学习过程中一些注意事项

菜鸟教程1、HTML5 语义元素语义元素就是有意义的元素。一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义元素实例:<div>和<span> 无需考虑内容.语义元素实例: <form>,<table>and <img> 清楚的定义了它的内容。区块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>,< p>, <ul>, <table>，<div&
复制链接

扫一扫