学习HTML框架的第二次作业加上了上次和本次笔记

最新推荐文章于 2024-10-15 23:23:29 发布

神游四方

最新推荐文章于 2024-10-15 23:23:29 发布

阅读量47

点赞数

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/shenyousifang/article/details/134453499

版权

其一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春不常在，抓紧谈恋爱</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="#">
        昵称：<input type="text" name="username" placeholder="请输入昵称"><br>
        性别：<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女<br>
        所在城市：<select name="city">
            <option value="上海" selected>上海</option>
            <option value="南京">南京</option>
            <option value="西安">西安</option>
            </select><br>
        婚姻状况：<input type="radio" name="hun" value="未婚" checked>未婚
        <input type="radio" name="hun" value="已婚" >已婚
        <input type="radio" name="hun" value="保密" >保密<br>
        喜欢的类型：<input type="checkbox" name="hobby" >可爱
        <input type="checkbox" name="hobby" >性感
        <input type="checkbox" name="hobby" >御姐
        <input type="checkbox" name="hobby" >萝莉
        <input type="checkbox" name="hobby" >小鲜肉
        <input type="checkbox" name="hobby" >大叔<br>
        个人介绍：<textarea name="" id="" cols="30" rows="10"></textarea>
        <h2>我承诺</h2>
        <ul type="round">
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚的寻找另一半</li>
        </ul>
        <h4><input type="checkbox" name="tit" >我同意以上条款</h4>
        <button>免费注册</button>
        <button>提交</button>
    </form>

</body>
</html>

运行结果：

其二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <h1><center>用户注册</center></h1>
    <div align="center"><form action="#" >
        <p>用户名&nbsp;<input type =”text”  name=”username” placeholder="请输入昵称"></p>
        <p>密码&nbsp;<input type =”password”  name=”pud” placeholder="密码">
        <p>性别&nbsp;<input type="radio" name= "sex"value="男" > 男 
            <input type="radio" name= "sex"value="女"> 女  </p>
        <p>爱好&nbsp;<input type="checkbox">唱 
         <input type="checkbox">跳 
         <input type="checkbox">Rap
         <input type="checkbox">打篮球</p>
        <p>邮箱&nbsp;<input type =”text”  name=”you” placeholder="请输入你的邮箱"></p>
        <p>用户头像&nbsp;<input type="file"></p>
        <p>家庭住址&nbsp;<select  name="city" >
            <option value="请输入你的住址">请输入你的住址</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="重庆">重庆</option>
            <option value="南京">南京</option>
        </select></p>
        <p>收货地址 &nbsp;<select  name="city" >
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="重庆">重庆</option>
            <option value="南京" selected>南京</option>
            </select>
        </p>
        <p>建议或意见&nbsp;<textarea name="" cols="20" rows="2" placeholder="你的建议或意见"></textarea></p>
        <p>选择你喜欢的颜色&nbsp;<input type="color">&nbsp;注册时间&nbsp;<input type="datetime-local"></p>
        <p><br></p>
        <button>注册</button>&nbsp;<button>重置</button>
    </div>        


</body>
</html>

运行结果：

笔记如下：（补上上次的）

计算机基础：

硬件：控制器、运算器、输入设备、输出设备、存储（内存、磁盘）

软件：系统软件：window、linux、mac

应用软件：腾讯视频、网易云

b/s架构：browser server

c/s架构：client 客户端

学习点：

html（结构）、css（表现）、javascript（行为）

标签：

双标签：<标签属性="属性值" 属性="属性值">内容</标签>

属性：1.给标签提供附加信息2.大多数属性以键值对的形式存在

如果属性名和属性值一样，可以只写属性值

单标签：<标签属性="属性值" />

html骨架生成：vscode里：shift+！+shift

—第一个HTML的页面

<marquee loop="2" /此为循环两次/

bgcolor="pink" /此为颜色的更改/>

<input type="text" /键入文本框/

disabled bgcolor="green">你们都是祖国的花骨朵儿 /输出文字/

</marquee> /后缀/

—html的骨架

<!DOCTYPE html>

<html lang="en"> /默认输出英文/

<head> /头文件/

<title>你们都是祖国的花骨朵儿</title> /网页标题/

</head>

<body> /文字主体或者说是内容主体/

你们都是祖国的花骨朵儿 /网页正文/

</body>

</html>

—文章标题标签

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>我是标题一</h1>

<h2>我是标题二</h2>

<h6>我是标题6</h6> /此处为字体的大小和粗细/

</body>

</html>

—段落标签

<p>和</p>为段落，下空一行

<hr>为分隔符长横线

<br>为强制换行

<i>和<i/>为斜体

<img scr=”” width=”” height=”” align=””hspace=”” vspce=””>第三位为按图片中部排列第四位为水平更改第五位为纵向更改

<title>图片上图示

<alt>未加载显示

（超链接）A标跨html文件进行链接

<a href=”地址” _____> 文字或者图片 </a>

其中可加 target_blank /规定如何打开规定位置，保留当前页面/

当然相对路径也可以完成下一个网页的跳转

（锚链接）在同一个html的文件里链接

<a href=”#___”> id=”__”

Div 标签

<div>文字 </div> 划分区域，无任何的具体含义

Span 标签

便于准确的标注无具体含义配合css进行辅助定位

视频标签

<video>

音频

表单

(各种控制器件)

例如：

用户名：<input type =”text” name=””>

密码：<input type=”password >

性别:男<input type=“radio“ name=”sex“ > 女<input type=“radio“ name=”sex“ value=”女”>

你在干什么？吃饭<input type=”checkbox” /记忆点，里面放同一属性/>

</form>

<input type=”submit” name=””>有功能性的按钮

<button>点击提交</button>有功能性的按钮

<textarea> 键入字符方框</>

<option value =”” selected >/列表中默认/

<input …. Placeholder=”输入用户名：”>/可以消失的字/

Disabled 禁用

第三课

<caption>标题

<thead>表头</> align=”“ 设置水平对齐模式 valign=”“设置竖直对齐模式

<tr>创建一行</tr> bgcolor=““设置颜色 <th>在<tr>中创建横向小单元属性

<td>单元格</td>在单元格上rowspan=“ 数字“ 跨行合并 colspan=” 数字“ 跨列合并

格式如下：

<body>

<caption>优秀学生信息表格</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="3">你们很优秀</td>

</tr>

</tbody>

</table>

</body>

效果：

Iframe框架

广告嵌入等，<iframe src=” 地址”>

可以与a链接使用，格式如下：

<dialog>可以设置一个可以关闭的对话框里面加上open属性才可以看到，不然是不可见

<script>Const

全局属性

所有标签都具有的属性

一个标签可以有多个class名

<,,,class><sytle格式进行class内容的定义

Title也是全局属性、

<div tabindex=”1”>使其可选择后面可以使其被更改

表单的补充：

通过<label>标签去标记到一起，

比如下图：

或者下图（第二条）

特殊字符

空格符：&nbsp；表示一个空格

小于号：&lt；

大于号：&gt；

版权信息：&copy；

MDN；网道；可以去查找标签自行学习

HTML：原始

CSS:进行包装

Javes；进行动作等等

CSS学习

名称.css

在<head>

选择器{}

比如：div{ }

引入css 外链式

<title><style>（放在<head>里面） CTRL+/ 是注释

选择器：

/标签选择器/

Div{ }

/类选择器/

.类型名{ } 配合class使用

/id选择器/

#加上id名

/通配符选择器/ （找到网页内所有标签）

*{ }

/包含选择器/

1./子代选择器/

.类>另一类{ } （只选择了第一层）

2./后代选择器/

.类+空格+类{ } （都能选择）

/复合选择器/ （逗号选择器）

标签加逗号加别的 { }

/属性选择器/

Input[ 标签及其值（标签名加^=表示以。。。开头 $=表示以。。。结尾 *=表示包含。。。） ] { }

/伪类选择器/

标签：hover{ } 如果对div则hover+div

标签：focus{ }

/其他选择器/

（<li>$数值，自动写出数值行）

例子：Ul li :nth-child(数值行){ }

在ul 下面找第数值个li

Nth-of-type( 数值行) 对li进行编号查找

First-child { }第一个

Lasy-child { }最后一个

2n-1 奇数行（可以放在数值行）

在之前之后加上内容：

/伪元素选择器/

标签：：selection 鼠标选中选择

神游四方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

学习HTML框架的第二次作业 加上了上次和本次笔记

学习HTML框架的第二次作业加上了上次和本次笔记