HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

柚子～

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量85

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_45454695/article/details/102575102

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html相关介绍

html是超文本标记语言，http是超文本传输协议，常见域名有com org edu gov mil
开发工具常用的有：WebStorm notepad++ Eclipse text sublime Dreamweaver
Intellij IDEA

html结构： 要缩进

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

</body>
</html>

标签及其属性

标题 h1~h6
段落 p
超链接a

<a href="链接的目标地址" target="打开目标窗口"></a>

 target: _blank  在新窗口打开
         _parent 在原窗口打开

属性
align=“center” 居中

<p align="right"></p>

锚记
1、跳转到同一个页面的不同位置
在跳转位置处添加一个锚记，

<a name="名称"></a>

创建链接

<a href=“#锚记名称”>点击内容</a>

2、跳转到不同页面的不同位置
在跳转位置处添加一个锚记，

<a name="名称"></a>
<a name="../文件路径></a>        //    .代表向外跳出一级

创建链接

<a href="文件名#锚记名称">点击内容</a>

水平线
是单标签

<hr width="宽度" color="颜色" size="线粗细"/>

单位：像素( px) 百分比(%) em rem

注释

<!--注释文本-->

换行

<br/>

空格

表示方式：
第一种

 &nbsp;

第二种
全角状态下输入空格，即为空格
第三种

预格式化

<pre></pre>
<em></em>斜体		 <i></i>
<b></b>加粗 		 <strong></strong> 
<big></big>字体放大   <small></small>
<code></code>放置代码
<del></del>删除线
<sub></sub>下标
<sup></sup>上标

图片img

<img src="图片路径" alt="信息提示" title=“图片描述” width=“图片宽度”height=“图片高度”/>

表格table

<table border="边框线" cellspacing="边框单元格间距" cellpadding="单元格填充" width="表格宽度">
<caption>表头</caption>
 <tr>
	<th>标题行</th>
</tr>
 <tr align="对齐方式">
	<td>单元格</td>
</tr>
</table>

跨行 rowspan 跨列 colspan

列表

第一种是无序列表
type:disc(默认实心圆) square 方块 circle 空心圆

<ul type="">
	<li></li>
</ul>

第二种是有序列表
type:1 a A i I start:起始位置

<ol type="" start="">
	<li></li>
</ol>

第三种是自定义列表

<dl>
 <dt></dt>
 <dd></dd>
</dl>

表单form

文本框  <input type="text"/>
密码框  <input type="password"/>
单选按钮  <input type="radio"/>
复选框  <input type="checkbox"/>
文件域  <input type="file"/>
按钮  <input type="submit"/> 提交
      <input type="reset"/>  重置
      <input type="button" value="值"/>
      <button></button>
下拉列表  <select>
			<option></option>
        	<option selected></option>默认初始选中的
		 </select>

文本域	<textarea rows="行数" cols="列数"></textarea>

表单分组<fieldset>
			<legend></legend>
        </fieldset>
     <fieldset>
         <legend>问卷调查</legend>
         用户名：<input type="text"/><br><br>
         昵称：<input type="text"/>
     </fieldset>

这是上述表单分组fieldset相关小练习的结果显示：
在这里这插入图片描述
webstorm快捷键:
alt+F2 浏览
按alt键单击，可以在不同地方输入相同文字
ctrl+D 复制
输入lorem按tab键，可以添加测试文本
输入标签按tab键，可以自动生成完整标签
p*数字按tab键，可以输入多行标签P
ctrl+shift+/ 可以快速加注释

柚子～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

html相关介绍html是超文本标记语言，http是超文本传输协议，常见域名有com org edu gov mil开发工具常用的有：WebStorm notepad++ Eclipse text sublime DreamweaverIntellij IDEAhtml结构：<!DOCTYPE html><html lang="en"&g...
复制链接

扫一扫