HTML&CSS快速入门

1.HTML

HTML(HyperText Markup Language):超文本标记语言

  • 结构:HTML
  • 表现:CSS
  • 行为:JavaScript
标签描述
<HTML>定义 HTML 文档
<head>定义关于文档的信息
<title>定义文档的标题
<body>定义文档的主体

1.2 基础标签

标签描述
<h1> ~ <h6>定义标题,h1最大,h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt ;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;引号
&reg;®已注册
&copy;©版权
&trade;商标
&nbsp;不断行的空白

1.3 图片、音频、视频标签

标签描述
<img>定义图片
<audio>定义音频
<video>定义视频
  • img:定义图片

    • src:规定显示图像的 URL
    • height:定义图像的高度
    • width:定义图像的宽度
  • audio:定义音频。支持的音频格式:MP3、WAV、OGG

    • src:规定音频的 URL
    • controls:显示播放控件
  • video:定义视频。支持的音频格式:MP4, WebM、OGG

    • src:规定视频的 URL
    • controls:显示播放控件

1.4 超链接标签

标签描述
<a>定义超链接,用于链接到另一个资源
  • href:指定访问资源的URL
  • target:指定打开资源的方式
    • _self:默认值,在当前页面打开
      • _blank:在空白页面打开

1.5 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
  • type:设置符号的类型

1.6 表格标签

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格
  • table:设置符号的类型

    • table:定义表格
      • width:宽度
      • border:边框
      • cellpadding:定义内容和单元格的距离
      • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
      • bgcolor:背景色
      • align:对齐方式
    • tr:定义行
      • bgcolor:背景色
      • align:对齐方式
    • td:定义单元格
      • colspan:合并列
      • rowspan:合并行
    • th:定义表头单元格
    • :表格标题

1.7 布局标签

标签描述
<div>定义 HTML 文档中的一个区域部分,经常与 CSS 一起使用,用来布局网页
<span>用于组合行内元素。

1.8 表单标签

标签描述
<form>定义表单
<input>定义表单项,通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域

1.9 表单项标签

<input>:表单项,通过type属性控制输入形式

input 标签有多个 type 属性。 type 属性的取值不同,展示的效果也不一样

type 取值描述
text默认值。定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
hidden定义隐藏的输入字段
submit定义提交按钮,提交按钮会把表单数据发送到服务器
reset定义重置按钮,重置按钮会清除表单中的所有数据
button定义可点击按钮

2. CSS

Cascading Style Sheet(层叠样式表),用于控制网页表现。

2.1 css 导入方式

CSS 导入方式就是 css 代码和 html 代码的结合方式。

CSS 导入 HTML有三种方式:

  • 内联样式:在标签内部使用style属性,属性值是css属性键值对

    <div style="color: red">Hello CSS~</div>
    

    内联方式只能作用在这一个标签上,如果其他的标签也想使用同样的样式,就需要在其他标签上写上相同的样式。复用性太差。

  • 内部样式:定义<style>标签,在标签内部定义css样式

    <style type="text/css">
    	div{
    		color: red;
        }
    </style>
    

    可以做到在该页面中复用。

  • 外部样式:定义link标签,引入外部的css文件

    编写一个css文件。名为:demo.css,如下:

    div{
    	color: red;
    }
    

    在html中引入 css 文件。

    <link rel="stylesheet"  href="demo.css">
    

    这种方式可以在多个页面进行复用。其他的页面想使用同样的样式,只需要使用 link 标签引入该css文件。

2.2 css 选择器

css 选择器就是选取需设置样式的元素(标签),比如如下css代码:

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。、

  • 元素选择器

    格式:

    元素名称{color: red;}
    
  • id选择器

    格式:

    #id属性值{color: red;}
    
  • 类选择器

    格式:

    .class属性值{color: red;}
    

2.3 css 属性

https://www.runoob.com/cssref/css-reference.html

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值