Day2前端基础学习

这里写目录标题

    • 一·. 标题标签
    • 二·. 段落标签
    • 三. 链接标签
    • 四. 图片标签
    • 五. 列表标签
      • 1. 无序列表
      • 2.有序列表
    • 六 . 表单标签
      • 1.1 input表单元素
      • 1.2
      • 3 . 文本输入框:
      • 4.密码框
      • 5.lable :
      • 6.按钮
      • 1.文件选择
      • 2.Button 按钮
      • 3.隐藏按钮

一·. 标题标签

h1-h6语义越来越轻,字体由大到小。
页面上只有一个h1标签

        <h1>我是h1h1>
		<h2>我是h2h1>
		<h3>我是h3h3>
		<h4>我是h4h4>

Day2前端基础学习_第1张图片

二·. 段落标签

一段一段文字的时候使用。

        <h3>登鹳雀楼h3>
		<p>白日依山尽p>
		<p>黄河入海流p>
		<p>欲穷千里目p>
		<p>更上一层楼p>

Day2前端基础学习_第2张图片

三. 链接标签

能实现页面间的跳转和页面内的跳转;
href : 目的地,跳转后的URL地址;
Tittle:鼠标悬停显示的内容;
Target:设置跳转的方式;
_self : 在当前页面中打开;(默认值)
_blank:在新的页面打开。

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 a>

四. 图片标签

上一级目录 …/
当前目录 ./
alt : 图片加载失败时显示。
img:图片标签
Day2前端基础学习_第3张图片

	<img src="img/background.jpg" alt="图片加载失败" />

五. 列表标签

1. 无序列表

无序列表始于 ul标签。每个列表项始于 li标签。

type:

circle 空心圆

disc圆点

square正方形

	不能有的坏习惯
		<ul type="square">
			<li>li>
			<li>li>
			<li>li>
			<li>li>
		ul>

Day2前端基础学习_第4张图片

2.有序列表

有序列表也是一列项目,列表项目使用数字进行标记;
有序列表始于

    type:

    1 阿拉伯数字

    a英文小写

    A英文大写

    i罗马小写数字

    I罗马大写数字

    start编号样式的

    起始数字,如:编号样式设为A,起始值设置为2,则列表的起始值为B

    <ol type="i">
    			<li>li>
    			<li>穿li>
    			<li>li>
    			<li>li>
    			<li>li>
    		ol>
    

    Day2前端基础学习_第5张图片 3.自定义列表
    Day2前端基础学习_第6张图片其基本语法如下:

    <dl>
     <dt>名词1dt>
     <dd>名词1解释1dd>
     <dd>名词1解释2dd>
    dl>
    

    注意:
    1.dl 里面只能包含 dt和 dd。
    2. dt 和 dd个数没有限制,经常是一个dt对应多个dd。

    六 . 表单标签

    1.1 input表单元素

    type 属性的属性值及其描述如下:
    Day2前端基础学习_第7张图片

    1.2

    除 type 属性外,标签还有其他很多属性,其常用属性如下:
    Day2前端基础学习_第8张图片

    3 . 文本输入框:

    文本:<input type="text" name="name"><br>
    

    4.密码框

    	<label for="pwd">密码: label>
    

    5.lable :

    一般和input标签联合使用,点击lable的时候,对应input的可以获取焦点。

    提交按钮 submit<input type="submit" value="提交按钮"><br>
    普通按钮 button<input type="button" value="我是按钮"><br>
    重置按钮 reset <input type="reset" value="重置按钮"><br>
    

    6.按钮

    单选按钮

    性别:
    			<input type="radio" name="sex"><input type="radio" name="sex"><br>
    

    多选按钮

     checkbook:<input type="checkbox" name="love" ><input type="checkbox" name="love" ><input type="checkbox" name="love" ><br>			    select><br>
    

    1.文件选择

    头像:<input type="file"><br>
    

    2.Button 按钮

    <button type="button" value="input按钮"><br>
    

    3.隐藏按钮

    :<input type="hidden" name="id" value="1234567">
    

    Day2前端基础学习_第9张图片

你可能感兴趣的:(笔记,html)