HTML学习笔记1

时间：2023-02-13 10:59:08


1.2 单标记和双标记
1.单标记：空标记，就是没有结束标记的称之为单标记。
语法：水平线标记：​​​<hr />​​​ 换行标记:​​<br />​​​ 2.双标记：体标，就是这个标记有开始和结束
语法：​​<font>​​和​​</font>​​ 1.3.文本控制和文本样式标记
1.段落标记​​<p></p>​​和换行标记​​<br />​​ 段落标记：段落与段落之间会自动换行
2.文本样式标记​​<font>​​内容​​</font>​​ 常用的属性： face用来描述字体的样式
Size用来描述字体的大小，最大取值为7
Color用来描述字体的颜色，取值三种形式：
*用英文单词来表示：red,green,blue
*使用十六进制的数据表示:#ff0000
*使用RGB三原色表示：RGB(255,255,0)
3.其他标记
标题标记：​​<h1></h1>,<h2></h2>----------<h6></h6>​​ 字体样式标记:字体加粗​​<b></b>​​字体倾斜​​<i></i>​​字体下划线​​<u></u>​​ 4.图像标记：
1.图像标记：在网页上引入图片
语法：​​<img src=”图像的url”/>​​ 常用的属性：src用来引入图片
width用来描述图片的宽度
height用来描述图片的高度
border用来描述图片的边框
注意：图片的路径分为绝对路径和相对路径（同级目录，上级目录，下级目录）
注释标记：<!—图像标记–>，注释标记的内容不回显示在网页上面
****html描述网页的语言，并不是很严谨的语言，html标记通过被浏览器解析，展示特定的效果。
5.表格标记：
1.表格的作用：将数据更加有条理的显示出来；用来规划网页
2.语法：

<table>
                  <tr>
                             <td>单元格的内容</td>
                  </tr>
         </table>
tr:表示行(常用的属性 align 描述表格内的内容显示位置)
   td:表示单元格   
   th:表示单元格，文字自动居中，加粗
  常用的属性:
     border：给表格添加边框。
     width:描述表格的宽度。
     align：描述表格的位置
     cellspacing:描述表格的厚度
     cellpadding:描述文字与边框的距离
     合并操作：
  1. 要确定表格有多少行和多少列。 合并行：rowspan
    ,合并单元格：colspan
    2.要确定合并的是行还是列。

6.表单标记
表单简介:吧用户输入的数据提交到服务器端，简单来说，表单用来让用户输入数据，表单把数据封装起来提交到指定的位置。
表单组成：
>>>表单控件：用户输入数据，比如说输入用户名，输入密码。
>>>提示信息：告诉用户输入框要输入什么值，
>>>表单域：标识表单的开始和结束，语法 提示信息：表单控件

  1. 创建表单
比如：<form action="demo1.html" method="post" name="登陆表单">
   用户名：<input type="text" name="username" /><br/>
   密码：   <input type="password" name="psw" /><br/>
                <input type="submit" value="提交" />
</form>

常用的属性：action表示表单要提交的位置。
method:表单提交的方式，常用的有get和post提交，默认提交方式是 get提交
get提交：数据会显示在浏览器的地址栏，不安全，提交的数据大小是有限制的
post提交：数据不回显示在地址栏，是安全的，提交的数据大小没有限制
2. 表单控件：​​​<input />​​​ 输入框控件的属性type:
文本框：text
密码框：password
单选按钮：radio
复选按钮：checkbox
上传按钮：file
提交按钮：submit
重置按钮:reset
注意：表单想要把数据提交到指定的位置，输入框必须要有name属性。
3. 文本域标记：​​<textarea rows=”文本域的行数” cols=”文本域每行输入的字符数”></textarea>​​ 比如：
评论：​​<br/>​​

<form method="get" action="demo1.html">
<!--注意：表单想要把数据提交到指定的位置，输入框必须要有name属性。-->
<textarea rows="5" clos="50" name="pinglun">输入评论，请注意文明用语</textarea><br/>
<input type="submit" value="提交评论" />
</form>

1.7列表标记和超链接标记
1.列表标记：有序列表标记、无需列表标记、自定义列表标记
无序列表：

<ul>
               <li>列表项内容1</li>
               <li>列表项内容2</li>
               <li>列表项内容3</li>
           </ul>
属性：type 默认值disc,  square,circle

2.超链接标记：可以实现跳转的效果
语法：​​​<a href=”跳转的url” target=”目标窗口的弹出方式”>文本或者图片</a>​​​ Target:_self 在原有的窗口打开网页
_blank 打开一个新的窗口显示要跳转的网页
比如：

<a href="demo1.html" target="_self">自己站内跳转到demo1之self的效果</a><br/>
<a href="demo1.html" target="_blank">自己站内跳转到demo1之blank的效果</a><br/>

href属性：跳转的url 1.站内跳转 2.站外跳转
1.8

标记
Div:通常是用来实现网页布局


标签：

相关文章