HTML和CSS

多喝ye水

已于 2023-03-31 20:36:06 修改

阅读量465

点赞数 1

文章标签： css html

于 2023-03-31 20:06:50 首次发布

本文链接：https://blog.csdn.net/weixin_75111554/article/details/129847131

版权

b.锚链接（标记HTML文档中的某个点，通过点击a标签，可直接跳转到这个点的位置）

4.三大特性(3条消息) CSS的三大特性_css特性_bit..的博客-CSDN博客https://blog.csdn.net/weixin_68773927/article/details/128050835

a.层叠性

b.继承性

c.优先级

5.常用属性(3条消息) 常用css样式大全以及css属性代码大全_css样式代码大全_大图书馆的牧羊人的博客-CSDN博客https://blog.csdn.net/qwqc262/article/details/108930286

一、 HTML基本标签

那么接下来让我们来了解HTML六类基本标签

1、文本格式化标签

标题	段落	段内换行	水平线	预留格式
h1~h6	p	br	hr	pre

a.标题<h></h>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--注意只有六级标题，h7以后的标签不会显示-->

标题在网页中呈现在字号的大小和加粗上，从一级到六级逐渐变小

b.段落<p></p>

这个标签在网页中呈现出一段的效果，标签内的空格空行不保留，（比如在标签内输入两个空格后，打开网页自动显示一个空格，输入回车，也显示一个空格，如果想表示空格可以用 &nbsp 来表示一个不换行的空格）一行写满后自动换行。

<p>这是一个段落      ，这个段落里的
    空格和空行
   自动保留一个空格</p>
这段代码呈现出的效果如下:
这是一个段落 ，这个段落里的 空格和空行 自动保留一个空格

c. 段内换行<br />

该标签是单标签，效果如下

<p>这是一个段落<br />好了，后面这句话在第二行了</p>
效果呈现：
这是一个段落
好了，后面这句话在第二行了

d.水平线<hr />

该标签为单标签，用来表示水平线<hr />

e.预留格式<pre></pre>

当我们想在网页上呈现像诗歌，歌词等这种对格式有要求的内容的时候，就可以使用pre标签，pre标签可以完整的保留你输入的格式，例如空格和空行，这点与p标签有所不同。

<pre>
                《夜雨寄北》
                        ————李商隐
        君问归期未有期，巴山夜雨涨秋池。
        何当共剪西窗烛，却话巴山夜雨时。
</pre>
效果展示：

                《夜雨寄北》
                        ————李商隐
        君问归期未有期，巴山夜雨涨秋池。
        何当共剪西窗烛，却话巴山夜雨时。

2.超链接标签a

超链接就是当光标移动到这个关键字和关键图片上时，点击即可进入另一个窗口，就像我们平时浏览网页时会点击自己感兴趣的词条或图片，进入另一个网页，超链接就发挥这样的作用，以下是几种常用的超链接

链接到本网站其他网页	<a href="news.html">新闻</a>
链接到别的网站	<a href="地址">网站</a>
锚链接	<a href="#">指定位置</a>

a.target属性

a标签的target属性可以决定是在本页面中打开超链接还是在新的标签页打开超链接，示例如下

<a href="网址" target="_blank">关键词</a>
<!--默认情况下，target的值为_self,在本页面中打开超链接，_blank则是在新的标签页打开超链接-->

b.锚链接（标记HTML文档中的某个点，通过点击a标签，可直接跳转到这个点的位置）

第一种方式：id方式


<a href="#top">去top位置</a>
<p id="top">目标位置</p>
注释：这里#起到锚点的作用，要先定义锚点，再用id标注跳转到锚点的目标位置

第二种方式：name属性

name属性的用法和id本质上一样的，可以直接把id换成name

3.插入图像img

当我们想在网页中插入图像时，就可以用img标签，示例如下：

<img src="图片地址" width="" height=""/>
<!--用该标签可以插入图片，width和height属性可以规定图片大小-->

注意：图片地址就涉及到相对路径和绝对路径了，不过问题不大

4.区域div，span

<div>balabala<span>balabala</span>balabala</div>

区域性标签方便CSS对HTMl文档进行样式改变

5.列表，表格，表单

a.列表ol/ul li

ol有序列表，ul无序列表

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<ul>
    <li>HTML</li>
    <li>CSS<li>
    <li>JavaScript</li>
</ul>

样式展示：

（有序）

HTML
CSS
JavaScript

（无序）

HTML
CSS
JavaScript

b.表格table

表格的三个重要标签tr（行）th（表头）td（普通表格），示例如下

<table border="1">
<tr>
  <th>表头</th>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <th>表头</th>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

border属性有边框

c.表单form

form标签中最重要的元素就是input，表单是什么，简单来说就是我们在一个网站注册账户时会出现的地方，演示如下

<form>
    姓名：<input type="text" />
          <input type="submit" value="提交" /><br />
    密码：<input type="password" /><br />
    爱好：<input type="text" />
          <input type="submit" value="确定" />
          <input type="reset" value="重置" /><br />
    <input type="button" value="click it" /><br />
    喜欢的水果（单选框）：
                苹果<input type="radio" value="apple" name="fruit"checked="checked" />
                桃子<input type="radio" value="peach" name="fruit" />
                芒果<input type="radio" value="mango" name="fruit" /><br />
    复选框：<input type="checkbox" value="1"  name="haha" checked="checked" />选项一
            <input type="checkbox" value="2" name="haha" />选项二
            <input type="checkbox" value="3" name="haha" />选项三<br />
    下拉列表：
    <select>
        <option selected="selected">选项一</option>
        <option>选项二</option>
        <option>选项三</option>
    </select><br />
    文本域：<textarea row="20" cols="20">文本区域</textarea>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
    

</form>

value：显示按钮上的文字

checked="checked"/selected="selected":表示单选框、复选框、下拉列表默认选中该选项

br标签表示换行

二.CSS基础

1.CSS发展历史

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着html的成长，为了满足前端开发者的需要，html新增很多样式属性，html变得更加杂乱，html越来越臃肿，这时，css诞生了，目前W3C标准时CSS3

2.CSS的作用

让HTML从样式中解脱出来，更加专注的进行结构呈现，同时也让网页的样式更加多样，更为美观

3.CSS引用方式

a.行内样式：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
      <p  style = "color:red;" >
      天使投资指早期投资，尤其指个人早期投资。
     </p>
</body>
</html>

b.内嵌样式：

<!DOCTYPE HTML>
<html>
<head>
    <style>
         p {
                color: red;
         }
    </style>
</head>
<body>
    <p >
      天使投资指早期投资，尤其指个人早期投资。
    </p>
</body>
</html>

c.外部样式表文件：

p{
    color: red;      /*设置文字颜色*/
  }
--------------------------------------------------------------------------------------------------------------------------------------------------

<!- - 网页文件: 1.html - - >
<!DOCTYPE HTML>
<html>
<head>
<link  rel="stylesheet"  href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

外部样式表文件是CSS文档，并不在HTML文件中，需要link引入，link标签写在head标签内

4.三大特性(3条消息) CSS的三大特性_css特性_bit..的博客-CSDN博客https://blog.csdn.net/weixin_68773927/article/details/128050835

参考该博客，非原创。

a.层叠性

样式冲突遵循的原则就是就近原则，那个样式离结构近，就执行那那个样式。
样式不冲突，不会叠加。

b.继承性

CSS中的继承性:子标签会继承父标签的某些此样式，如文本的颜色和字号，简单理解：子承父业

恰当的使用继承可以简化代码，降低CSS的复杂性。
子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）
继承性的口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

行高的继承性：

行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前元素的文字大小*1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

c.优先级

当同一个元素指定多个选择器就会由优先级产生。
选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行5

选择器权重：

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
Id选择器	0,1,0,0
行内选择器 style=" "	1,0,0,0
!important 重要性	无穷大