2019/8/27，day02，web前端

最新推荐文章于 2023-12-28 16:18:33 发布

CJAnn

最新推荐文章于 2023-12-28 16:18:33 发布

阅读量104

点赞数

分类专栏：笔记文章标签：菜鸟笔记

本文链接：https://blog.csdn.net/weixin_43996898/article/details/100109653

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

菜鸟小笔记1

2019年8月27日周二 21:17 重庆
以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~

今日内容

HTML常用标签
1、段落标签<p></p>
2、标题标签<h1></h1>~<h6></h6>
3、列表标签
①有序列表:<ol>列表项</ol>
②无序列表:<ul>列表项</ul>
    列表项：<li>列表内容</li>
4、区块标签<div></div>
5、图片标签<img src="URL路径" alt="图片路径失效提示文本">
6、超链接标签
     ①锚点：
          目标点用id属性，并设置其值；
          利用href属性值的#+目标id属性值进行跳转
          直接#则是跳转至顶部
7、空标签
8、表单标签
     ①input组件：组件值设置value、文本提示placeholder、组件名name、类型设置type（text、password、radio、checkbox、submit、reset）
     ②文件输入域：输入域列cols、输入域行rows、输入域名称name、输入域提示文本placeholder、输入域ID id
     ③下拉选项菜单：选项名称name、选项框值value

<select>
	<option>选项内容</option>
</select>

④表单标记：标记属性for（属性值：对应组件id名）
⑤html转义字符

HTML元素
1、行内元素：无法设置元素的宽度或者高度，多个元素并排显示，元素与元素之间存在默认5px的距离。（a、img、span、input、…）
2、块级元素：独占一行，可设置宽和高（div，p，h1~h6，ol/ul，li，form，…）
3、行内块级元素：即能同行显示，又能设置宽高，但元素之间始终存在默认的5px距离（img···）

HTML标签嵌套规则
1、理论上，可以随意嵌套，可以自行创造标签
2、建议：
① 行内元素可嵌套行内元素但不可嵌套块级元素，块级元素可嵌套块级元素和行内元素
② 区域标签常用于内容顶层标签，建议不要被其他标签嵌套

CSS样式表
1、内嵌样式表<元素 style=“样式规则”></元素>：一般不用，但常用于JS对某个页面元素进行单独的样式添加时使用
2、内部样式表：网页例子或者小demo时用内部样式更直观，且方便

<head>
      <style>
           选择器{
              样式规则;
                }
      </style>
</head>

3、外部样式表：编写网站都应使用
①建立一个以.css结尾的文件，如下写法
选择器{
样式规则
}
②在头部标签利用link引入标签将我们的CSS文件引入至当前HTML文档，写法如下：

 <head>
             <link rel="stylesheet" href="cssURL地址">
 </head>

4、选择器
     ①元素选择器
     ②ID选择器：ID选择器具有唯一性，不可在当前HTML文档之中重复使用
          html: <元素 id=“id值”></元素>
          css : #id值{样式规则}
     ③类选择器
     ④子代选择器
     ⑤后代选择器
     ⑥群组选择器
     ⑦伪类选择器
     ⑧通识符选择器

<!--链接的各种用法-->
<a href="https://www.baidu.com">前往百度</a>
<a href="login.html">点击登录</a>
<a href="1.txt">查看文档</a>
<a href="me.jpeg">查看图片</a>
<a href="2017.zip">点击下载</a>

<!--javascript，链接两种区别（地址）-->
<a href="javascript:" class="btn">back</a>
<a href="javascript:alert('this is a secret')">click me !</a>
<script>
    document.getElementsByClassName("btn")[0].onclick=function () {
        alert("I am back!");
    }
</script>

今日份收获

1、锚点的跳转知识
2、表单标签：包含相关组件时，reset才生效，不包括时input也可以使用
3、表单标记：如果想单击单选按钮后的文本也可以将前方框勾选则需使用，如：

<!--加了label后单选按钮点击没有，也可选中-->
 <input type="radio" name="hobby" value="0" id="id"><label for="id">没有</label><br>

4、行内元素可嵌套行内元素但不可嵌套块级元素，块级元素可嵌套块级元素和行内元素，如：

<h1>
    <a href="https://www.baidu.com">百度首页</a>
</h1>
不要下面这种嵌套：
<a href="https://www.baidu.com">
    <h1>百度首页</h1>
</a>

CJAnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019/8/27，day02，web前端

菜鸟小笔记12019年8月27日周二 21:17 重庆以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~今日内容HTML常用标签1、段落标签<p></p>2、标题标签<h1></h1>~<h6></h6>3、列表标签①有序列表:<ol>列表项</ol>②无序列表:<ul&gt...
复制链接

扫一扫