欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

Web前端学习笔记

发布时间：2023/12/10 HTML 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Web前端学习笔记 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

拨云见日

一，嵌套列表

列表之间可以互相嵌套形成多层级列表

<ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul></li><li>山东省<ul><li>济南</li><li>青岛</li><li>烟台</li></ul></li></ul>

以上代码所呈现效果：

<h1>好美味小吃</h1><ul><li>小吃类<ul><li>煮粉干</li><li>拌青菜</li><li>蛋炒饭</li><li>煎蛋</li><li>米饭</li></ul></li><li>卤味类<ul><li>鸭肠</li><li>面筋</li><li>牛肚</li><li>猪耳朵</li><li>大肠</li><li>鱿鱼</li></ul> </li><li>套餐类<ul><li>卤面筋饭</li><li>猪肉肉饭</li><li>猪耳朵饭</li><li>卤猪脚饭</li><li>卤猪脚饭</li></ul></li><li>炖罐类<ul><li>猪蹄黄豆</li><li>牛肉枸杞</li></ul> </li></ul>

效果：

二，表格标签

<table> 表格的最外层容器 <tr> 定义表格行 <th> 定义表头 <td> 定义表格单元 <caption> 定义表格标题 (有嵌套关系，要符合嵌套规范) <body><table><tr> <th>日期</th><th>天气情况</th><th>出行情况</th></tr> </table></body> *语义化标签(在表格里不显示效果，但是语义化标签有益于团队协作) <thead> <tBody> <tFood>

在一个table中，tBody是可以出现多次的，但是thead,tFood只能出现一次

三，表格属性

border:边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，centre，right）
valign：上下对齐方式（top，middle，bottom）

例如 <table border="" cellpadding="" cellspacing="">...</table><td rowspan="" colspan="">...</td>< tr align=“right” valign="top" >..</tr>

四，表单标签

（1）表单标签1

<form>:表单的最外层容器 <input>:标签用于收集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。

注：表单标签不需要按照嵌套关系

常见type属性


注：type属性，决定控件的样式，是什么控件

<body> <form action-"http://www.baidu.com"><h2>输入框：</h2><input type="text"><h2>密码框 </h2><input type="password"><h2>复选框</h2><input type="checkbox">苹果<input type="checkbox">香蕉<input type='"checkbox">葡萄<h2>单选框</h2><input type=-"radio" name="gender"›男<input type="radio"•name="gender" >女<h2>上传文件</h2><input type-"file"><h2>提交按钮和重量按钮</h2><input type="submit"><input type="reset"> </form> </body> </html>

action:" "：提交地址
checked:默认选中
disabled：禁止选中
placehlder：在框内显示内容

效果

（2） 表单标签2

[1]多行文本框

<textarea cols="30" row="10"></textarea>

[2]下拉菜单

<select>外层 <option>内项 例如： <h2>下拉菜单</h2> <select><option selected disables>请选择</option><option>北京</option><option selected>上海</option> 当前被选中，不然默认显示第一项<option>杭州</option> </select> <multiple>：多选属性(点击然后鼠标滑过或者ctrl+鼠标左键) <input type ="file"multiple>多选插入文件

如何扩大选中范围？

[3]辅助表单

<input type="radio"name="gender"id="man"><label for="man">男</label>id起到一一对应的作用

通过以上的标签，可以实现表格表单组合，但是要注意，表格是有嵌套规范的！

五， div和span

div：分割，分区（做一个区域划分的块）

span：修饰文字 （对文字进行修饰，内联）

以上二位默认都是没有样式的，我们需要通过CSS来实现样式

CSS的基本语法

一,格式

选择器（属性1：值1；属性2：值2）
【最后一个属性可以不用；结尾】

<style> 添加样式 </style> </head> <body><div>zhjhu</div></body></html>

二，单位

px 像素 横向px竖向px相乘就是我们平时常说的分变率
% 百分比

三，基本样式

width，height，background-color

标签需要有映射关系，div可以一对二

四，CSS注释

/*CSS注释的内容*/

五，内联格式与内部样式

【1】内联（行内行间）样式
在HTML标签上添加的样式
注：内部样式的优点
[可以复用代码],复合W3C的规范标准进行让结构和样式分开处理

六，外部样式

1，引入一个单独的css文件

<link>标签 ref 外部资源的类型，该属性规定当前文档与被链接文档之间的关系 href 外部资源的地址（引入外部资源） 2，@import 问题很多，不建议使用 <style> @import url（） </style>

七，颜色表示法

1.单词表示法
2.16进制表示法
3.三原色表示法
rab(255,255,255)
括号里的数字取值只能是0~255
附颜色表

4.通过工具获取网页颜色
【1】下载Fe助手，在网络条件下进行
【2】photoshop

八，背景样式

background-image

url:图片地址，默认水平垂直铺满

background-repeat

repeat-x 横行铺满
repeat-y 竖向铺满
repeat 横行竖向都铺满
no-repeat都不平铺

background-attachment

scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed： （背景位置是按照浏览器位置进行的）

九，CSS边框样式

边框样式

solid实线
doshed虚线
dotted点线

<style> div{width:300px;height:300px;border-style:solid} </style>

边框颜色

在样式栏中编写选择，透明色：transpavent

十， CSS文字样式

1.font-family：字体类型

英文
中文
<英文字体一般只作用于英文>

div{font-family:'Times New Roman';}

字体两头加引号是特殊情况，即当字体名称中有空格的时候

！注意

【1】设置多字体

div{font-family:'Times New Roman’，simsun，微软雅黑；}

原因：因为网页中的字体是否能够被识别取决于电脑里该字体是否存在，以防万一，设置多字体，依次尝试

2.衬线体与非衬线体

十一，CSS文字样式

1.font-size字体大小

默认：16px
写法：nunber(px)|单词（ small， large…不推荐使用）


注：字体大小一般是偶数

2.font-style字体样式

模式：正常（normal)斜体（ italic)
写法：单词（normal italic)
注：oblique也是表示斜体，用的比较少，
一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设靈倾斜操佴。
2.cb1ique 没有倾斜属性的字体也可以设置倾斜操作。

3.font-weight字体粗细

模式：正常(normal)
写法：单词(mormal、bold)加粗（bold）
数值：只有100，200…900(100到500正常）（600到900加粗)

4.字体颜色

十二，CSS段落样式

1.text-decoration文本装饰

下划线underline
删除线line-through
止划线overline
不添加任何装饰none

p{width:300px,text-decoration:line-through}

多项样式选择用空格隔开

2.text-transform文本大小写（针对英文）

p{text-transform:lowercase/uppercase/capitalize小写/大写/仅首字母大写}

3.text-indent:文本缩进

首行缩进，假如默认一个文字16px

p{text-indent:32px;}

em单位：相对单位，永远等于一个字的大小

4.text-align

p{text-align:left/right/justify}

5.line-height

什么是行高？
一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1. number( px)2.scale （比例值，跟当前文字大小有关）

6.letter-spacing定义行间距

letter-spacing ：定义字间距
word-spacing：定义词间距（针对英文）

英文与数字不自动折行的问题
强制折行：(针对英文)

  • word-break : break-all;(非常强烈的折行)
  • word-wrap :break-word;（不是那么强烈的折行）

    • 十三，CSS复合样式

    一个CSS属性只控制一种样式，叫做单一样式。
    一个CSS属性控制多种样式，叫做复合样式。
    复合样式
    background：red，url,repeat
    border:px,color,soild
    font:(最少要两个值size,family,有顺序，必须按照这个顺序在最后)
    尽量不要混写，如果非要混写的话，一定要先写复合样式，再写单一样式

    十四，ID选择器

    CSS:#elem{}
    html:id=“elem”
    ‹style> #div1｛background: red;} #div2{ background: blue;} </style> </head> <body> ‹div id="div1">这是一个块</div> <div id="div2”>这又是一个块</div> </head> </body>

    映射关系

    注：

    1.在一个页面中，ID值是唯一的。
    2. 命名规范，字母-_数字（命名的第一位不能是数字）
    3. 命名方式，驼峰式，下划线式，短线式

    十五，CLASS选择器

    css:elem{}
    html:class:“elem”

    注：
    1.class选择器是可以复用的，
    2.可以添加多个class样式.
    3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序，
    4. 标签+类的写法

    总结

    以上是生活随笔为你收集整理的Web前端学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。