html和css基础

最新推荐文章于 2024-08-07 14:19:47 发布

Zhu_xr

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量142

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_40020877/article/details/105490160

版权

HTML基础

html介绍

HTML的全称是：HyperText Mark-up Language，指的是超文本标记语言。

标记：就是标签，<标签名称></标签名称>，比如:、

等，标签大多数都是成对出现。

HTML是网页开发语言，网页的文件后缀是.html或.htm，一个html文件就是一个网页。

HTML基本结构

<!doctype html>  <!--文档声明-->
<html lang="en">  <!--语言是英文-->
<head>  
    <meta charset="UTF-8">   <!--网页的编码格式-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <!--表示当前网页在移动端会进行缩放-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  <!--调用的ie浏览器-->
    <title>Document</title>  <!--网页标题-->
</head>
<body>
	<!--网页内容显示-->
</body>
</html>

一个网页包含两个基本组成部分：head 、body
head标签的主要作用：网页的设置和资源的引用，head标签中的内容一般不会显示在网页上。
boby标签中的内容一般显示在网页上

HTML标签的分类

按单双标签分

双标签（闭合标签）,示例：
```
<h1></h1>
```

单标签（空标签），示例：

<img src="图片路径" alt="图片介绍">

按显示分

块元素(行元素): 单个块元素在浏览器中默认独占一行块元素可以设置宽高等属性.
- 例如：
  ,
  ,
内联元素(行内元素): 多个内联元素可以在一行显示内联元素一般不能设置宽高
- 例如：,,

常用的HTML标签

标题

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

段落

<p>内容</p> <!--表示文档中的一个文字段落-->

通用块容器标签
```
<div>  </div>
```
图片标签
1. src属性主要是添加要展示的图片地址
2. alt属性的作用:
  - 图片加载失败时, 显示的提示信息
  - 搜索引擎在收录图片时, 根据这个属性值来收录图片
  - 制作无障碍网页, 方便盲人的读屏软件读取.
```
<img src="图片路径" alt="图片介绍">
```

超链接标签

1.href属性后接链接地址

2.a 标签有 target 属性

如果不设置该属性, 在当前页面打开新页面
如果设置该属性, 则会在新窗口中打开新页面

<!-- 超链接设置 -->
<a href="01.html">第一个网页</a>
<a href="http://www.itcast.com">itcast</a>
<a href="http://www.itcast.com"><img src="images/logo.png" alt=""> </a>

<!-- 这个会在新窗口打开内容 -->
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>复制
 说明

通用内联标签

<span style="color:red">内容</span>    <!--将其中内容按要求显示-->

一些特殊的标签

<br>  换行
&nbsp; 空格
&lt; 小于号(<)
&gt; 大于号(>)
<hr>  分割线

无序列表

<ul>
    <li>子项</li>
    <li>子项</li>
</ul>
<!--ul是无序列表，li是无序列表中的子项-->

有序列表

<ol>
    <li></li>
    ...
</ol>
<!--ol是有序列表，li是有序列表中的子项-->

表格

colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
border=‘1px’ 可以设置table的边框大小

<!-- table表格标签,border设置边框宽度 -->
<table border="1px">
    <!-- tr表格内的行标签 -->
    <tr>
        <!-- th表示表格中的表头 -->
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
        <th>标题四</th>
    </tr>
    <tr>
        <!-- td表示表格中的列 -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

不规则表格

<table>
	<tr>
    	<td colspan="2">1</td>  <!--表示并列2行-->
        <td rowspan="2">1</td>  <!--表示并行2列-->
    </tr>
</table>

表单

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

表单中的基本标签

<form> 标签 表示表单标签，定义整体的表单区域

action属性 设置表单数据提交地址
method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
<label>标签 表示表单元素的文字标注标签，定义文字标注

<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式,取决于 type 属性。
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
    
<textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

<select>标签 表示表单元素的下拉列表标签 定义下拉列表

<option>标签 与<select>标签配合，定义下拉列表中的选项

表单中的基本元素属性

name属性 设置表单元素的名称，该名称是提交数据时的参数名,提交表单字段必须有name属性
value属性 设置表单元素的值，该值是提交数据时参数名所对应的参数值

示例：

<!-- 提交表单使用使用form包裹 -->
<!-- action提交表单的地址 -->
<form action="https://127.0.0.1:8080/post_info.html" method="GET">
    <p>
        <!-- 用户名输入框 -->
        <label>姓名：</label><input type="text" name="username" />
    </p>
    <p>
        <!-- 提交表单的按钮 -->
        <input type="submit" name="" value="提交">
    </p>
</form>

get方式提交的数据不安全，工作中基本使用post方式提交数据。

一个提交页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action = "http://127.0.0.1:8080" method="post">
        <p><label>用户名：</label><input type="text" name="username"></p>
        <p><label>密码：</label><input type="password" name="password"></p>
        <p><label>性别：</label><input type="radio" name="sex" value="man">男<input type="radio" name="sex" value="woman">女</p>
        <p><label>爱好：</label><input type="checkbox" name="run" value="run">跑步<input type="checkbox" name="song" value="song">唱<input type="checkbox" name="dance" value="dance">跳</p>
        <p><label>照片：</label><input type="file" name="picture" ></p>
        <p>个人描述:<textarea></textarea></p>
        <p>
            <label>籍贯：</label>
            <select name="city">
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="hangzhou">杭州</option>
            </select>
        </p>
        <p><input type="submit"><input type="reset"></p>
    </form>

</body>
</html>

CSS基础

CSS介绍

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

格式

定义 css 的语法格式是: 选择器{样式规则}

CSS的三种引入方式

行内式

直接在标签的 style 属性中添加 css 样式

示例：

<div style="width:100px; height:100px; background:red ">hello</div>

内嵌式

在<head>标签内加入<style>标签，在<style>标签中编写css代码。

示例：

<head>
   <style type="text/css">
      div {
         /* 宽度 */
         width: 100px;
         /* 高度 */
         height: 200px;
         /* 背景色 */
         background: red; 
         }
   </style>
</head>

外链式

将css代码写在一个单独的.css文件中，在<link>标签中使用标签直接引入该文件到页面中。

示例：

div {
   /* 宽度 */
   width: 100px;
   /* 高度 */
   height: 200px;
   /* 背景色 */
   background: red;
}

<!-- href中指定css文件导入路径 -->
<link rel="stylesheet" type="text/css" href="css/main.css">

CSS选择器

选择器的用处

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

选择器的种类

标签选择器
类选择器
层级选择器(后代选择器)
组选择器
id选择器
属性选择器

标签选择器

标签选择器根据标签名来选择标签，以标签名开头，此种选择器影响范围大，一般用来做一些通用设置。

CSS代码

<style type="text/css">
    /* 标签选择器,直接以标签名开头 */
    p{
        /* 设置颜色是红色 */
        color: red;
    }
</style>

html代码

<!-- 网页展示的内容 -->
<div>hello div</div>
<p>hello p1</p>
<p>hello p2</p>

类选择器

类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

css代码

<style type="text/css">
    /* 类选择器以.开头,后面填写需要被操作标签的类名 */

    /* class中类名为div01的标签设置对应css样式 */
    .div01{
        color:blue
    }
    /* class中类名为p01的标签设置对应css样式 */
    .p01{
        color:red
    }

    /* class中类名为box的标签设置对应css样式 */
    .box{
        width:100px;
        height:100px;
        background:gold
    } 
</style>

html代码

<div class="div01">这是一个div</div>
<!-- 这个标签可以设置多个类名 -->
<p class="p01 box">这是一个段落</p>

层级选择器

层级选择器根据层级关系选择后代标签，以外层标签内层标签，主要应用在标签嵌套的结构中，减少命名。这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器。

css代码

<style type="text/css">
/* div 下在的p标签设置样式 */
div p{
    color: red;
}

/* 类名为con的标签下的类名为url的标签设置样式 */
.con .url{
    color:pink;
}
</style>

html代码

<div>
    <p>hello</p>
</div>

<div class="con">
    <p>哈哈</p>
    <a href="http://www.itcast.cn" class="url">传智播客</a>
</div>
<p>你好</p>
<a href="#" class="url">百度</a>

组选择器

组选择器可以把多个标签组成一个组，以, 分割, 如果有公共的样式设置，可以使用组选择器进行统一的样式设置。

css代码

<style type="text/css">
    /* 组选择器使用,对标签进行分隔 */
  /* 设置第一个与第三个div样式 */
    .box1,
    .box3 {
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背影 */
        background: green;
    }
</style>

html代码

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

id选择器

id选择器，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，所以不推荐使用id作为选择器。在css里id名称是可以的相同的。但如果页面涉及到JavaScript，就有问题了。因为JavaScript里获取DOM是通过getElementById，如果页面出现同一个id多次的话，这样元素就获取不到了。所以id需要唯一性。

css代码

<style type="text/css">
   /* id选择器以#号开始 */
    #div01{
        color:red;
    } 

    #div02{
        color:green;
    } 
</style>

html

<div id="div01">这是一个段落标签</div>   <!-- 每个标签的id名称不能相同-->
<div id='div02'>这是第二个段落标签</div> <!-- 每个标签的id名称不能相同-->

属性选择器

属性选择器根据属性选择标签，以标签名[属性名=‘属性值’]开头, 一个属性选择器可应用于多个标签上。

css代码

<style type="text/css">
    /* 设置键为name值为itcast的标签设置为红色 */

    [name='itcast']{
        color: red
    }
	/*div[name='itcast']{
        color: red
    }*/
</style>

html代码

<!-- 设置黑马程序员与传智播客字体颜色为红色 -->
<div name="itcast"> 黑马程序员 </div>
<div name="baidu"> 百度 </div>
<div name="itcast"> 传智播客 </div>

CSS属性

样式属性的表现形式是: 属性名:属性值;

布局常用属性

属性	作用	举例
width	设置元素(标签)的宽度	width: 200px;
height	设置元素(标签)的高度	height: 200px;
background	设置元素背景色或者背景图片(详看下面)	background: pink;
background	设置元素背景色或者背景图片(详看下面)	background: url(images/logo.png);
border	设置元素四周的边框	border: 1px solid pink;
border-top	设置元素顶部边框	border-top: 1px solid/ dashed pink;
border-left	设置元素左边边框	border-left: 1px solid pink;
border-right	设置元素右边边框	border-right: 1px solid pink;
border-bottom	设置元素底部边框	border-bottom: 1px solid pink;

文本常用属性

属性	作用	举例
color	设置文字的颜色	color: red;
font-size	设置文字的大小	font-size: 12px;
font-family	设置文字的字体	font-family: ‘Microsoft Yahei’; (微软雅黑)
font-weight	设置文字是否加粗	font-weight: bold; (bold:加粗 normal: 正常)
line-height	设置文字的行高	line-height: 24px; (文字高度加上文字上下间距共计24px)
text-decoration	设置文字的下划线	text-decoration:none; (取消下划线)
text-align	设置文字水平对齐	text-align:center 设置文字水平居中
text-indent	设置文字首行缩进	text-indent:24px; 设置文字首行缩进24px

表格常用属性

属性	作用	举例
width	设置元素(标签)的宽度	width: 200px;
height	设置元素(标签)的高度	height: 200px;
border	设置元素四周的边框	border: 1px solid pink;
border-collapse	设置表格线合并	border-collapse: collapse;
text-align	设置文字对齐方式	text-align: start/center/end;

Zhu_xr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和css基础

HTML基础html介绍 HTML的全称是：HyperText Mark-up Language，指的是超文本标记语言。标记：就是标签，<标签名称></标签名称>，比如:、等，标签大多数都是成对出现。 HTML是网页开发语言，网页的文件后缀是.html或.htm，一个html文件就是一个网页。文章目录HTML基础html介绍HTML基本结构HTML标签的分...
复制链接

扫一扫