一篇博文带你0基础 Html和css入门

Posted 2021-06-20 贪吃ღ大魔王

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一篇博文带你0基础 Html和css入门相关的知识，希望对你有一定的参考价值。

前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐

html5

网站:

1、网站的建立流程🌙

注册域名
租用空间
网站建设

确定网站的主题
搜索资料
规划网站
制作页面

4.网站的推广

5.网站的维护

2、网页的组成及web标准🌙

结构：网页的结构部分 xhtml或html

表现：网页的样式css

行为：网页要实现的功能JS

HTML 超文本标记语言

XHTML 可扩展超文本标记语言

文件的创建

1、文件的命名规范

必须以英文字母等命名
不能有特殊的字符

2、一个网站文件的建立

三个文件css（表现）,js（行为）,image(图片，素材)⭐⭐
创建一个文本文件，后缀名改为html。

基础标签

1、基础语体⭐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

2、标记

<meta charset="utf-8">
这是防止中文乱码，在（head）里面

<br/>：换行；
<hr/>:空标记，一条长长的横线；
<s></s>:删除线
<u></u>:下划线
<tt></tt>:等宽
<sup></sup>:上标
<sub></sub>:下标
&nbsp;：空格；
&gt;   :>右大于号
&lt;   :<左小于号
&copy;  ：网页版权所有          
<p>段落文本</p>（不能自动换行）
<!--注释-->：快捷键为ctrl+/,选中内容即可转为注释

<b>内容</b>：加粗
<strong>内容</strong>：加粗
<i>内容</i>:倾斜
<em>内容</em>：倾斜
<div></div>：只有换行效果，用来创建网页的模块
<span></span>：内容中的的某一点提出改格式

<h1>网页的logo</h1>
<h2>网页的标题</h2>
...
<h6>网页的标题</h6>

HTML标签

1、图片

<img src="目标文件路径及全称" alt="图片替换的文本" title="图片标题"/>

文件名+/：是打开这个文件夹。

…/：返回上一级

./：当前文件夹

若网页和图片在同一个文件，直接输入图片的文件名。
图片在当前文件的子文件夹，用子文件夹名+/打开子文件，在输入图片名。
若都在子文件夹，先…/返回上一级，在进行上述操作。

2、链接

<a href="目标文件夹路径及全称/链接地址/内部链接id名" target="打开方式" title="提示文本" [download="下载路径"]>

链接地址一般都是遵循http://协议，所有网站地址前不加这进不去。
打开方式_self覆盖当前网页打开。_blank打开新的窗口。
download下载选项属性⭐⭐

3、基本标签

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

4、H5新标签⭐⭐⭐

<heaedr></heaedr>
<footer></footer>
<nav></nav>
<section></section>（一般表示内容快）
<article></article>（一般表示与上下不关联的独立内容）
<aside></aside>（一般表示article左右两边的内容）
<figure></figure>（独立内容，脱流）
<figcaption></figcaption>（figure标题，仅一个）
<mark></mark>（高亮）
<center></center>（居中标签）

5、序列表

1、有序列表：

<ol type="1<!--或i或I或a或A-->" start="数字"<!--表示从第几个地方开始-->>
    <li>列表内容</li>
    。。。
    <li>列表内容</li>
</ol>

2、无序列表：

<ul type="形状的英文单词"<!--如circle空心圆、aquare正方形。默认实心圆-->>
     <li>列表内容</li>
    。。。
    <li>列表内容</li>
</ul>

3、自定义列表：

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
</dl>

6、表格⭐

<table width="数字px" height="数字px" bgcolor="背景颜色" cellspacing="数字px" cellpadding="数字px" border="边宽" bordercolor="边框颜色" rules="行列之间的线" align="left/center/right">
    <caption>标题</caption>
    <thead>
        <tr>
            <th></th>
            <!--注意⭐thead里的td换成th使用-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        tr>td*3（快速创建）
    </tfoot>
</table>

cellspacing：单元格间的距离

cellpadding :单元格与元素间的距离

border=“边款实线或虚线颜色”

实线：solid；虚线：dotted；

align:模板位置，在表格和模块中使用。

align=“center”；使表格模板居中

注意：auto在表格里不适用，但align在页面上不能用。

valign：列排列位置：middle(中间)

rules：

rows：行之间的线

cols：列之间的线

all：行和列之间的线

none：没有线

group：每个格子的线（默认）

都是给td加

colspan=“所要合并的单元格的列数”，合并列

rowspan=“所要合并的单元格的行数”，合并行

7、表单

1、表单框

<form name="表单名称" method="post/get" action="路径" [enctype="multipart/form-data"]></form>

method：传递方式，“post”和“get”两种。get不安全，传输数据有限。

action：数据传输的路径。

name：和人名的功能一样，方便分组

enctype="multipart/form-data"：表单里有上传文件的表单项时必须加

2、表单分区⭐

<fieldset>
    <legend>我的</legend>
    <label for="">name</label>
    <input type="text">
</fieldset>

fieldset:自带边框边距

legend：线上写字，用padding调节位置

label：input的前(后)名字

input：单行文本输入框，前后名也可用p标签

3、input类型🌙

<input type="text" value='名字'><br>
<input type="password" placeholder="密码"><br>
<input type="submit"><br>
<input type="reset"><br>
<input type="button" value='按钮'><br>
<input type="checkbox">多选1
<input type="checkbox">多选2
<br>
<input type="radio" name="radio">单选1
<input type="radio" name="radio">单选2
<br>
<input type="number"><br>
<input type="color"><br>
<input type="file"><br>上传文件
<input type="email"><br>
<input type="url"><br>
<input type="range"><br>
<input type="search"><br>
<input type="time"><br>
<input type="month"><br>
<input type="week"><br>
<input type="hidden" value='123'>
<!-- <input type="image">(待定) -->🌙

4、input内联🌙

value=‘内容’

placeholder=“提示”

size=“字数”

patten=“正则表达式”

下面的可以使用正则更好

maxlength=“最大字数”

checked=“checked”(默认选中)

disabled=“disabled”(禁止选中)

step=“数据间隔”（待定）🌙

required(提交时内容不能为空)

min=‘’;max=‘’;（限制范围）🌙

multiple(框内输入多值，逗号隔开，设置多张图片等上传也是它)

autofocus（获取焦点）

autocomplete='off/on'(待定)🌙
list=‘id名’ (下拉提示框)
<input type="text" list='id'>
<datalist id='id'>
 <option value="我"></option>
 <option value="你"></option>
</datalist>

5、下拉列表()

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

select的value值为选中的option的value值

6、文本域⭐

<textarea name="" id="" cols="30" rows="10"></textarea>

8、视频⭐

<video src="视频路径" controls poster="图片路径">
    <source src="路径" type='video/mp4'>
    <source src="路径" type='video/ogg'>
    <source src="路径" type='video/webm'>
</video>

9、音频

<audio src="音频路径" controls poster="图片路径">
    <source src="路径" type='video/mp4'>
    <source src="路径" type='video/ogg'>
    <source src="路径" type='video/webm'>
</audio>

10、视频音频控件（内联）

controls：播放控件
autoplay：自动播放
loop：循环播放
poster：放前显示图片
muted：静音
js控制播放：play();
js控制暂停：pause();

11、滚动标签

<marquee behavior="" direction=""></marquee>

behavior:alternate(晃动)&scroll(滚动)&slide(到边停)
direction:四个方向
height
width
hspace=''设置水平边距。
vspace=''以像素或百分比值设置垂直边距。
loop=‘数’（次数）
scrollamount='数px'（滚动长度，默认6）
scrolldelay='数'（滚动间隔，单位毫秒）

12、flash(仅了解)⭐

1、新建一个flash文件

2、语法

<object data="" type="">
    <param name="movie" value="路径">
    <param name="wmode" value="transparent">
</object>

3、背景透明

1、<param name="wmode" value="transparent">
2、<embed src='路径' wmode='transparent'>

13、`iframe`标签

<iframe src="网站" 
        frameborder="0/1" (周围边框)
        scrolling="yes/no"(滚动条)
        name=""
        height=""
        width=""
        >
</iframe>

14、框架标签

<frame> 标签定义frameset中的一个特定的窗口（框架）。

在 HTML 中，<frame>标签没有结束标签。

在 XHTML 中，<frame> 标签必须被正确地关闭。

<html>
<frameset rows="165，*">
    <frame src="frame_top.htm"以上是关于一篇博文带你0基础 Html和css入门的主要内容，如果未能解决你的问题，请参考以下文章 
 canvas入门，一篇博文带你学会用代码绘画，直击实战案例！
 一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~
 一篇博文：带你 gulp入门 0基础必看，万字肝爆，建议收藏~
 Python二次转码不用愁，一篇博文带你快速搞定！
 一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！
 一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！