讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 > 正文

0

0

慕课网HTML+CSS课程笔记_html/css_WEB-ITnose

php中文网

php中文网

发布时间：2016-06-24 11:19:58

|

1546人浏览过

|

来源于php中文网

原创

  • 内容摘自慕课网

    • html

  • 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用表示强调。
  • 标签是没有语义的，它的作用就是为了设置单独的样式用的。
  • 要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。文本
  • 浏览器对
    标签的解析是缩进样式。

  • 标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
    、
    和慕课网HTML+CSS课程笔记_html/css_WEB-ITnose。
  • 空格代码 
    • 来源：作文网  作者：为梦想而飞
  • 水平分割线

    联系地址信息如公司的地址就可以
    标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
    • 北京市西城区德外大街10号

    address定义的文本默认是斜体。

  • 文章中一般如果要插入多行代码时不能使用标签，
    如果是多行代码，可以使用

    标签。

  •  标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是
    标签的一个常见应用就是用来展示计算机的源代码。
  • 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
    标签中，这个
    标签的作用就相当于一个容器。
  • 我们把一些标签放进
    里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
    提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
  • …：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。
  • 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
    •    语法：
  • 标题
    • 用以描述表格内容，标题的显示位置：表格上方。 
     语法：
                
            …    …
        标题文本    
            …        …
        
  • 使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

    •     
    链接显示的文本
        
    title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
    

    立即学习“前端免费学习笔记（深入）”；
        
  • 使用mailto在网页中链接邮件地址，慕课网讲的很细致。
    •     
  • 使用慕课网HTML+CSS课程笔记_html/css_WEB-ITnose标签来插入图片。
    •     
    下载失败时的替换文本
        
    title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
        
  • form表单中post与get方法比较
    •     
  • 使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
    •     
        
    所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上哦！）。
        
  • 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
    •     
       
        
    1、type：
        
    当type=”text”时，输入框为文本输入框;
        
    当type=”password”时, 输入框为密码输入框。
        
    2、name：为文本框命名，以备后台程序ASP 、PHP使用。
        
    3、value：为文本输入框设置默认值。(一般起到提示作用)
        
  • 当用户需要在表单中输入大段文字时，需要用到文本输入域。
    •     
        
  • 单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
    •     
        
    注意:同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
        
  • 下拉列表
    •     
            
        
    value值是向服务器提交的值。
        
  • 下拉列表也可以进行多选操作，在

    •     
  • 提交按钮
    •     
        
    type：只有当type值设置为submit时，按钮才有提交作用
        
    value：按钮上显示的文字
        
  • 当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
    •     
        
  • label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
    •     
        
    CSS
        
  • 就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。
    •     
  • CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
    •     
  • 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
    •     
    这里文字是红色。
        
  • 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

    •     
        
    注意：
        
    1、css样式文件名称以有意义的英文字母命名，如 main.css。
        
    2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。
        
    3、标签位置一般写在
    标签之内。
        

  • 三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式。 
    其实总结来说，就是–就近原则（离被设置元素越近优先级别越高）。
    •     
  • 类选择器 
    使用class=”类选择器名称”为标签设置一个类，如下：
    •     
    胆小如鼠
        
    设置类选器css样式，如下：
        
    .stress{color:red;}/*类前面要加入一个英文圆点*/
        
  • ID选择器 
    在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
    •     
    1、为标签设置id=”ID名称”，而不是class=”类名称”。
        
    2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
        
  • 类选择器与id选择器的区别
    •     
  • 子选择器 
    还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
    •     
    .food>li{border:1px solid red;}
        
  • 包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
    •     
    .first  span{color:red;}
        
    总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
        
  • 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
    •     
    a:hover{color:red;}
        
  • 有一些css样式是不具有继承性的。如border:1px solid red;
    •     
  • 下面是权值的规则：
    •     
    标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
        
    p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/
        
    注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
        
  • 我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
    •     
    p{color:red!important;}
        
    这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式     
    
							
    
								有道智云AI开放平台
								
    
									有道智云AI开放平台
									
    有道智云AI开放平台
    
								
    
								下载 
							
    
						
    

  • 现在一般网页喜欢设置“微软雅黑”，如下代码：
    •     
    body{font-family:"Microsoft Yahei";}
        
  • 以下代码可以实现文字以斜体样式在浏览器中显示：
    •     
    p a{font-style:italic;}
        
  • 有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：
    •     
    p a{text-decoration:underline;}
        
  • 文字的删除线使用下面代码就可以实现：
    •     
    .oldPrice{text-decoration:line-through;}
        
  • 中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
    •     
    p{text-indent:2em;}
        
    注意：2em的意思就是文字的2倍大小。
        
  • 在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
    •     
    p{line-height:1.5em;}
        
  • 段落排版–中文字间距、字母间距 
    如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
    •     
    h1{ letter-spacing:50px;}
        
    如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。
        
  • 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 
    常用的块状元素有：
    •     
    、
    、
    ...
    、
      、