HTML+CSS基础笔记---标签之旅

最新推荐文章于 2024-12-11 14:48:38 发布

原创最新推荐文章于 2024-12-11 14:48:38 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端设计专栏收录该内容

16 篇文章

订阅专栏

本文深入解析网页标记语言HTML和CSS的基本用法，包括标签的类型、功能及CSS选择器的应用，帮助开发者构建美观、功能丰富的网页。


<h1> </h1>标题标签
<hx> </hx>

<p> </p> 段落标签，一段文字
<img src="1.jpg">  网页图片


----------


<head>标签定义文档的头部，头部元素有<title>、<script>、 <style>、<link>、<meta>

----------

<title> 网页的标题信息

<!-- 注释文字 -->

<body> 网页上要展示出来的页面内容

//强调
//关键字
<stong> </strong>  更强烈的强调，粗体
<em> </em> 强调，斜体

<span> </span> 设置单独样式

<q>引用文本</q> 浏览器会为引用文本加上双引号
<blockquote></blockquote> 长文本引用

<br /> 换行

&nbsp; 空格

<hr/> 横线 默认样式线条比较粗，颜色是灰色

<address> </address> 联系地址信息

<code> </code> 一行代码

<pre> </pre> 大段代码


----------


<ul>

<li> </li>  没有前后顺序的信息列表
<li> </li>
...
</ul>

<ol>

<li> </li>  有顺序的信息列表
<li> </li>
...
</ol>

----------

<div>...</div> 独立的逻辑部分
给每一个div空间命名，id
<div  id="版块名称">...</div>


----------

/*
1.caption标签，可以添加标题和摘要，便于搜索引擎
2.<table summary = "简介文本">
3.<caption>标题文本</caption>  放置在table标签的里面
*/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为表格添加边框</title>

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

</head>

<body>
<table summary="">
  <tr>
    <th>班级</th>
    <th>学生数</th>
    <th>平均成绩</th>
  </tr>
  <tr>
    <td>一班</td>
    <td>30</td>
    <td>89</td>
  </tr>
  <tr>
    <td>二班</td>
    <td>35</td>
    <td>85</td>
  </tr>
  <tr>
    <td>三班</td>
    <td>32</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

----------

//加入<a>标签，文字颜色为蓝色，点击过后为紫色

<a href="目标网址" title = "鼠标滑过显示的文本"> 连接显示的文本</a>

//默认情况下，是在当前浏览器窗口打开

<a href="目标网址" target="_blank">click here!</a>

//连接Email网址
//多个参数的时候，？开头，中间用&隔开

<a href="mailto:邮箱"?subject="邮件主题"&body="邮件内容">显示文本</a>

----------

/*
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
*/

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">


----------

//使用表单标签，与用户交互
//浏览器输入的数据被传送到的地方
//文本输入框/密码输入框

<form   method="传送方式"   action="服务器文件">

<form    method="post"   action="save.php">

        <label for="username">用户名:</label>
        //1.文本输入框，name为文本框命名，以备后台程序ASP，PHP使用
        //2.也可以码上value,默认
        <input type="text" name="username" />

        <label for="pass">密码:</label>

        <input type="password" name="pass" />
</form>

这里写图片描述


<textarea cols="50"rows="10">在这里输入内容</textarea>

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

<input   type="submit"   value="提交">

span{
    color:red;
}

<span> </span>

/*
1.外部式css样式
2.rel="stylesheet" type="text/css" 是固定写法不可修改
3.在<head>标签之内
/*

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

<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/

</style>

CSS选择器

选择器{
    样式；
}

标签选择器{
    样式；
}

.类选器名称{css样式代码;}

<span class="类名称"> </span>

#类选择器名称{css样式代码}
ID选择器
<span id="类名称"> </span>  仅能在文档中使用一次

.类>自定义标签a{CSS样式代码}
只能用于第一代
<span class="类"><a>文本</a></span>

.类 自定义标签a{CSS样式代码}
用于全部子代
<span class="类"><a>文本</a></span>

*{CSS样式代码}
作用于全部<body>

伪类选择符
a:hover{CSS样式代码}
<a>标签上作用，展现CSS效果

标签1,标签2 {CSS式样代码}
分组选择符

CSS继承，层叠，重要性

特殊性

/*
标签的权值为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*/

层叠
重要性！important

CSS格式化排版

font-size  字号
color   颜色
font-weight:bold 粗体
font-style:italic  斜体
text-decoration:underline   下划线
.oldPrice{text-decoration:line-through；}  
p{text-indent:2em；} 缩进
p{line-height:1.5em；} 行间距
标签{letter-spacing:50px;} 文字间隔/字母间隔
标签{word-spacing:50px;} 字母间隔
标签{
    text-align:center/left/right;
}

CSS盒模型

块级元素

<div> <p> <h1> <form> <ul> <li>

a{display:block} //设置块级元素

内联元素

<span> <a> <label> <strong> <em>
div{
    display:inline; //块级转换成内联元素
}

内联块状元素

display:inline-block

盒子模型


padding  内填充
margin    外边距
border     边框
top  bottom left right  方向

<div> <ul> <ol> <p> <h> <table> 块级标签都具备盒子属性

边框属性

border-style:dashed(虚线),dotted(点线),solid(实线)

border-color:#十六进制颜色

border-width: __px

CSS布局模型

流动模型
浮动模型
层模型

在默认状态下，块状元素的宽度都是100%
内联元素从左到右水平分布显示，内联元素的标签a,span,em,strong

浮动模型

div,p,table,img可定义
关键字 float:

层模型

绝对定位 position:absolute
相对定位 position:relative
固定定位 position:fixed

注意定义缩写：上下相同可合并，左右相同可合并
颜色值缩写，如果每两位的值相同，可以缩写一半


//中文字体缩写常用代码
body{
    font:12px/1.5em  "宋体",sans-serif;
}

颜色值

字体颜色  color
背景颜色  backgroud-color 
边框颜色  border

1.英文命名颜色
2.RGB（red,green,blue）
3.十六进制颜色

水平居中设置
text-align:center

块状元素水平居中失效

不定宽块元素水平居中方法