1. 前端开发

自学html、css学习笔记

1.1 绝对路径

链接一张图的图片
<img src="网页链接/本地连接"/>

1.2 文本格式化

 <!-- 文本加粗 -->字体被<strong>加粗</strong>了<br/><!-- 文本倾斜 -->字体<em>倾斜</em><br/><!-- 删除线 -->我是<del>删除线</del><br/><!-- 下划线 -->我是<ins>下划线</ins><br/>

样例图

1.3 超链接

<!-- 语法格式 <a href="目标地址"  target="目标窗口的弹出方式">文字或图像 </a>href: 指定目标的urltraget: 指定目标的弹出方式，默认：_self（再当前标签页中打开）   _blank（在新标签页中打开） --><!-- 外部链接 --><h4>外部链接（网页链接）</h4><a href="http://www.qq.com"  target="_blank">腾讯</a><br/><!-- 内部链接 --><h4>内部链接</h4><a href="03-公司简介.html" target="_blank">公司简介</a><!-- 空链接：#  用于还没有开发的页面 --><h4>空链接：#</h4><a href="#">空链接，不会跳转</a><br/><!-- 下载链接 ，用于下载zip、exe文件如果是音乐文件，会直接播放--><h4>下载链接</h4><a href="A-Lin - 给我一个理由忘记.zip">下载《给我一个理由忘记.flac》</a><h4>网页元素的下载链接</h4><a href="蒲公英的约定吉他谱.7z"><img src="蒲公英的约定吉他谱.jpg" width="50"></a>

样例图：

1.4 锚点链接

何为锚点链接？

就是一个网页中，可以通过点击锚点链接，快速定位到网页的某处，常用的网站入：百度百科

详见  D:\Java_Web\frontDevelopment\html\04-锚点链接.html

1.5.1 表格1 （雏形）

<!-- 1. 表格的基本用法：<table><tr>                           定义表格中的行<td>单元格内的文字</td>     单元格，必须在<tr>中....</tr>....</table>2. 表头单元格：剧中，加粗表示<th></th>--><h4>普通表格</h4><table><tr><td>姓名</td>   <td>性别</td>   <td>年龄</td></tr><tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr><tr><td>张学友</td>   <td>男</td>   <td>56</td></tr><tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr></table><h4>表头表格</h4><table><tr><th>姓名</th>   <th>性别</th>   <th>年龄</th></tr><tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr><tr><td>张学友</td>   <td>男</td>   <td>56</td></tr><tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr></table>

样例：（年龄都是随便瞎编的）

1.5.2 表格2（加上表格属性）

<!-- 表格属性：属性名              属性值                      描述align           left、right、center            对齐方式border          1 或 ""                        规定表格是否有【边框】，默认为""cellpadding     像素值                         规定单元与内部文字之间的空白距离，默认1像素cellspacing     像素值                         规定单元格之间的空白距离，默认2像素width           像素值或者百分比                规定表格的宽度表格的结构标签：<thead></thead>、表头<tbody></tbody>，表身把表头行和剩余行分别写在这两个标签内部就行了-->
<body><h4 align="center">表头表格</h4><table align="center" border="1" cellpadding="20"  cellspacing="0" width="500" heigth="200"><thead><tr><th>姓名</th>   <th>性别</th>   <th>年龄</th></tr></thead><tbody><tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr><tr><td>张学友</td>   <td>男</td>   <td>56</td></tr><tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr></tbody></table>
</body

样例图：

1.5.3 表格——合并单元格

<!-- 合并单元格格式：- 跨行合并，rowspan="合并单元格的个数"- 跨列合并，colspan="合并单元格的个数"步骤：1. 确定是，跨行 还是 跨列2. 合并 <td colspan="2"></td>3. 删除多余单元格-->
<body><table width="600" height="250" border="1" cellspacing="0" align="center"><tr><td></td><td colspan="2"></td><!-- <td></td>      删除多余的单元格 --></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>

样例图：

1.6.1 无序列表

<!-- 无序列表（<ul>）的基本格式： <ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>.....</ul>【注意】：1. 列表项无顺序2. <ul>标签里只能由<li>标签，也不能写文字，但是<li>标签里可以放任何东西3. 无序列表中前面带的小圆点是可以改的，也可以去掉的。-->
<body><h4>你喜欢的水果？</h4><ul><li>西瓜</li><li>苹果</li><li>火龙果</li></ul>
</body>

样例图：

1.6.2 有序列表

使用场景：如果各个列表项中有顺序（比如排名），就需要用到有序列表

<!-- 有序列表（<ol>）语法格式：<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>-->
<body><h4>粉丝排行榜</h4><ol><li>胡歌-男粉 100w</li><li>胡歌-女粉 99w</li></ol>
</body>

样例图：

1.6.3 自定义列表

<!-- 1. 自定义列表的使用场景：一般对表头进行解释和描述2. 语法格式<dl><dt>名词</dt><dd>名词解释1</dd><dd>名词解释2</dd></dl>3. <dl>里中只能有<dd>、<dt>两种标签-->
<body><dl><dt>关注我们</dt><dd>新浪微博</dd><dd>联系我们</dd><dd>官方微信</dd></dl>
</body>

样例图：

1.7 表单

写的比较粗糙。

<!-- 1. 表单的作用：收集信息2. 表单的组成：* 表单域：包含表单元素的区域，可以将表单的信息提交给服务器<form action="url地址" method="提交方式" name="表单域名称">表单的控件</form>method： get/post方式name：   自定义* 表单控件（可以点击操作的）<input type="属性值" name="name" size="10">* 提示信息3. label标签：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）或者选择对应的表单元素上，用来【增加用户体验】4. <select></select>下拉框标签格式：(单选)<select><option value="">选项1</option><option value="">选项2</option><option value="">选项3</option></select>5. <textarea></textarea>文本域标签格式：  5行50列<textarea cols="50" rows="5">内容</textarea>-->
<body><form action="url" method="post" name="form">用户名：<input type="text" name="name" size="10" value="请输入用户名"><br/>密 码: <input type="password" name="pswd" size="10"><br/>年 龄：<input type="number" name="age" size="10" value="请输入年龄"><br/>性 别: 男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br/><br/>使用了label标签<input type="radio" name="sex" id="sex"/><label for="sex">男</label><br/> <br/>兴趣爱好:<input type="checkbox" name="sleep" value="睡觉">睡觉<input type="checkbox" name="pg" value="敲代码">敲代码<br/><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="重置"><br/><br/>普通按钮：<input type="button" name="code" value="获取验证码"><br/><br/>上传文件<input type="file" name="file"><br/><br/>院系：<select><option value="马克思学院">马克思学院</option><option value="计算机学院">计算机学院</option><option value="理学院">理学院</option></select><br/><br/>文本域标签<br/><textarea cols="50" rows="5">请描述个人就业经历，200字以内</textarea></form>
</body>

样例图：

        <option value="理学院">理学院</option></select><br/><br/>文本域标签<br/><textarea cols="50" rows="5">请描述个人就业经历，200字以内</textarea>
</form>

```

样例图：

前端-html-01相关推荐

python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
前端学习01 HTML入门
PC端网页布局--学完这个系列的目标是完成一个静态网站, 精通网页布局 HTML5->CSS3----->H5C3提高->网页制作实际开发制作流程规范 HTML简介网页网页是构成 ...
Web前端 CSS3 01
CSS 介绍网页分为三个部分结构 HTML表现 CSS行为 JavaScriptCSS 层叠样式表网页实际上是一个多层结构通过CSS 为网页每一层设计样式我们最终只能看到网页最上层 C ...
uniapp 打包安卓 Android 抖音app 前端篇~01
文章目录一.配置 1. 修改后端服务地址 2. 基础配置 3. App图标配置 4. App启动页面配置 5. App模块配置二.发行 2.1. 云打包 2.2. 云打包配置 2.3. 下载app ...
从前端开始——01网页三剑客（html）
01小白学习步骤(参考该博主的博客) 学习路线:HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax(axios ...
前端基础01：HTML
一.初识HTML 什么是HTML HTML:Hyper Text Markup Language (超文本标记语言) 超文本:文字.图片.音频.视频.动画等. HTML5:提供了一些新的元素和一些有趣 ...
前端入门 01：基础入门
文章目录目的开发工具基础说明简单示例相关拓展第三方库与框架打包成APP 后端开发总结题外话目的这些年硬件性能越来越好,HTML5.CSS3.ES6等新特性被越来越广泛的支持,前端 ...
前端基础01 html标签总结
一.html是什么 A.HTML是超文本标记语言 B.文本:txt文本只能用于存放文字或者是字符 C.超文本:不仅可以用于来描述文字还可以用于来描述图像音频视频超链接 D.标记:类似java ...
杂七杂八的前端基础01——函数作用域
首先我们来声明一个js对象person: var person = {talk() {console.log("I am talking...");} }; 复制代码然后调用pe ...
前端学习——01——js的赋值和运算符
//Js基本语法值类型---数据类型不可改变的原始值(栈数据) number string boolean undefined(声明了变量未赋值) 例如:var a; //a自动被赋值为undefin ...

前端-html-01

1. 前端开发

自学html、css学习笔记

1.1 绝对路径

1.2 文本格式化

1.3 超链接

1.4 锚点链接

1.5.1 表格1 （雏形）

1.5.2 表格2（加上表格属性）

1.5.3 表格——合并单元格

1.6.1 无序列表

1.6.2 有序列表

1.6.3 自定义列表

1.7 表单

前端-html-01相关推荐

最新文章

热门文章