前端三大法宝：HTML CSS JS JSON

最新推荐文章于 2024-05-10 20:36:43 发布

叶子★

最新推荐文章于 2024-05-10 20:36:43 发布

阅读量493

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_53375623/article/details/125796510

版权

一、HTML:

固定的头部信息：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>(当前页面的标题)
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
</head>

</html>

HTML的标签：

1、<h1>标题文字</h1>（标题1）（还要h2..h6）

2、<p>段落内容</p> （段落内容中有换行或者多个空格由一个空格替代）（每个p标签结束后会有换行）如图所示：

浏览器所呈现的内容：

3、<br/> 段落换行标签：

4、<span>不换行段落但是空格分开：

5、<div>跟p差不多就是换行是没有间距：

6、<p align="right"> ...</p>:文字向右对齐（left ，center（中间对齐））

7、<strong>...</strong>文字加粗 <ins>...</ins>下划线 <del>..<del>删除 <em>..<em>斜线

8、<a herf="URL地址">....</a>超链接

点击一下百度一下或者小狗照片就会转到一下页面

9、列表：

1、无序列表：

<ul>

....

</ul>

2、有序列表：

<ol>

....

</ol>

3、自定义列表：

<dl>

....

</dl>

10、表格：

<tr>...</tr>表格的行

<td>...<td>表格的列

border 是表格边框的大小

<thead>..</thead> <tbody>..</tbody> <tfoot>..</tfoot> 把表格划分为三部分

<td rowspan="2">...</td> 行合并 <td colspan="2">....</td>列合并

11.图片：

<img src="图片路径" >

<img scr="URL" width="图片大小">

12.form 表单：

<form >

<input type="radio" name="zzz" value="甲"> 女(这里只要name相同，那么就是单选)

<input type="radio" name="zzz" value="乙"> 男

<input type="checkbox" name="ooo" value="AA"> 游泳

<input type="checkbox" name="ooo" value="BB"> 足球

<input type="checkbox" name="ooo" value="CC"> 缝纫

<button type="submit">提交2</button>

</form>

13、form表单的运用：

</form>

</form>

</form>

二、CSS

css是来加工html的格式的

在html中引入css

如何在css中准确找到要修改格式的部分

id="xxx" 对应的是 #xxx{}

class="xxx" 对应是 .xxx{}

html中只有一个此类的标签：如 h1{}

1、还要超链接：

a:link{...}未被访问过的状态是什么

a:visited{...}已经被访问过是什么状态

a:hover{...}鼠标放在上面是什么状态

a:active{...}鼠标点击了，但是还没有松开是什么状态

2、文字：

font-size (字体的尺寸)

font-style(字体风格)

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

font-family（字体系列）（宋体楷书....）

font-weight(字体粗细)

3、文本

1、color文本颜色：

color：#参数（可以6为，也可以3位）（分别代表red green blue）

color：rgb（分别代表red ，green， blue)

color ：rgba（分别代表red， green， blue，透明度）

color:#ffffff;

color:#fff;

color:rgb(00,00,00);

color:rgba(00,00,00,.3);

2、文本格式

line-height（设置行高）

text-indent（文本首行缩进）

text-decoration（设置下划线）

text-align（文本对齐）

text-align: left;

text-decoration: line-through;

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。